<!DOCTYPE html>
<html lang="zh-CN">




<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历-项目简介-思维导图</title>

    <style>
        :root {
            --main-bg: linear-gradient(120deg, #d2e8ff 0%, #a0c9fc 100%);
            --container-bg: #a6cbf8;
            --section-bg: rgba(245, 250, 255, 0.98);
            --header-bg: linear-gradient(90deg, rgba(240, 248, 255, 0.98) 0%, rgba(220, 235, 255, 0.94) 100%);
            --border-color: rgba(51, 94, 147, 0.18);
            --text-color: #2c5282;
            --title-color: #2c5282;
            --detail-color: #4a6fa5;
            --link-color: #4a90e2;
            --link-hover-color: #2266bb;
            --accent-color: rgba(90, 157, 230, 0.7);
            --box-shadow: 0 10px 30px rgba(120, 180, 255, 0.08);
        }

        /* 核心算法样式 */
        .algorithm-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 15px;
            margin-bottom: 20px;
        }
        
        .algorithm-item {
            background: var(--section-bg);
            border-radius: 8px;
            padding: 15px 20px;
            box-shadow: var(--box-shadow);
            border: 1px solid var(--border-color);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .algorithm-item:hover {
            transform: translateY(-3px);
            box-shadow: var(--box-shadow);
            border-color: var(--accent-color);
        }
        
        /* 添加悬停渐变边框效果 */
        .algorithm-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, 
                transparent, 
                var(--accent-color),
                transparent);
            transition: left 0.5s ease;
        }
        
        .algorithm-item:hover::before {
            left: 100%;
        }
        
        /* 添加悬停背景轻微变化 */
        .algorithm-item::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--accent-color);
            opacity: 0;
            z-index: -1;
            transition: opacity 0.3s ease;
        }
        
        .algorithm-item:hover::after {
            opacity: 0.03;
        }
        
        .algorithm-title {
            color: var(--title-color);
            font-size: 1.1em;
            font-weight: bold;
            margin-bottom: 12px;
            text-align: center;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border-color);
            position: relative;
            transition: color 0.3s ease;
        }
        
        .algorithm-item:hover .algorithm-title {
            color: var(--link-color);
        }
        
        .algorithm-title::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 1px;
            background: var(--accent-color);
            transition: width 0.3s ease;
        }
        
        .algorithm-item:hover .algorithm-title::after {
            width: 70%;
        }
        
        .algorithm-list {
            list-style: none;
            padding-left: 0;
            margin: 0;
        }
        
        .algorithm-list li {
            color: var(--text-color);
            padding: 4px 0 4px 20px;
            position: relative;
            font-size: 0.92em;
            line-height: 1.25;
            margin-bottom: 14px;
            transition: all 0.2s ease;
        }
        
        .algorithm-list li:before {
            content: '•';
            color: var(--link-color);
            position: absolute;
            left: 6px;
            top: 4px;
            font-size: 1.1em;
            transition: transform 0.2s ease;
        }
        
        .algorithm-list li br {
            line-height: 1;
            content: "";
            display: block;
            margin-top: 0;
        }
        
        .algorithm-list li:hover {
            transform: translateX(3px);
            color: var(--detail-color);
            letter-spacing: 0.02em;
        }
        
        .algorithm-list li:hover:before {
            transform: scale(1.2);
        }
        
        /* 为文字添加悬停特效 */
        .algorithm-list li span {
            display: inline-block;
            position: relative;
            transition: all 0.3s ease;
        }
        
        .algorithm-list li span::after {
            content: '';
            position: absolute;
            width: 0;
            height: 1px;
            bottom: 0;
            left: 0;
            background-color: var(--link-color);
            visibility: hidden;
            transition: all 0.3s ease;
        }
        
        .algorithm-list li:hover span {
            text-shadow: 0 0 0.5px var(--detail-color);
            transform: translateY(-1px);
        }
        
        .algorithm-list li:hover span::after {
            visibility: visible;
            width: 100%;
        }
        
        @media (max-width: 768px) {
            .algorithm-container {
                grid-template-columns: 1fr;
            }
            
            .algorithm-item {
                margin-bottom: 15px;
            }
        }

        /* 添加粒子光效果 */
        .algorithm-item::after {
            content: '';
            position: absolute;
            width: 120px;
            height: 120px;
            background: radial-gradient(circle, 
                var(--accent-color) 0%, 
                rgba(var(--accent-color), 0.1) 30%, 
                rgba(var(--accent-color), 0) 70%);
            border-radius: 50%;
            right: -60px;
            bottom: -60px;
            opacity: 0;
            transition: opacity 0.5s ease;
            filter: blur(5px);
        }
        
        .algorithm-item:hover::after {
            opacity: 0.4;
            animation: glowPulse 3s infinite alternate;
        }
        
        @keyframes glowPulse {
            0%, 100% {
                opacity: 0.2;
                transform: scale(0.9);
            }
            50% {
                opacity: 0.4;
                transform: scale(1.1);
            }
        }

        .blue-white-theme {
            --main-bg: linear-gradient(120deg, #e0f2ff 0%, #b0d8ff 40%, #88c0ff 100%);
            --container-bg: rgba(180, 220, 255, 0.7);
            --section-bg: rgba(240, 248, 255, 0.9);
            --header-bg: linear-gradient(90deg, rgba(230, 245, 255, 0.9) 0%, rgba(200, 230, 255, 0.85) 50%, rgba(180, 220, 255, 0.8) 100%);
            --border-color: rgba(57, 206, 247, 0.641);
            --text-color: #2c5282;
            --title-color: #1a4b8c;
            --detail-color: #3a6da5;
            --link-color: #3a80d2;
            --link-hover-color: #1a60b0;
            --accent-color: rgba(80, 150, 255, 0.8);
            --box-shadow: 0 10px 30px rgba(80, 150, 255, 0.8);
        }



        .rainbow-theme {
            --main-bg: linear-gradient(120deg,
                    rgba(255, 0, 0, 0.1) 0%,
                    rgba(255, 165, 0, 0.1) 16%,
                    rgba(255, 255, 0, 0.1) 32%,
                    rgba(0, 128, 0, 0.1) 48%,
                    rgba(0, 0, 255, 0.1) 64%,
                    rgba(75, 0, 130, 0.1) 80%,
                    rgba(238, 130, 238, 0.1) 100%);
            --container-bg: rgba(255, 255, 255, 0.85);
            --section-bg: rgba(255, 255, 255, 0.88);
            --header-bg: linear-gradient(90deg,
                    rgba(255, 180, 180, 0.8) 0%,
                    rgba(255, 255, 180, 0.8) 25%,
                    rgba(180, 255, 180, 0.8) 50%,
                    rgba(180, 180, 255, 0.8) 75%,
                    rgba(255, 180, 255, 0.8) 100%);
            --border-color: rgba(120, 120, 255, 0.3);
            --text-color: #333;
            --title-color: #8e44ad;
            --detail-color: #445566;
            --link-color: #4a90e2;
            --link-hover-color: #2266bb;
            --accent-color: rgba(128, 0, 128, 0.7);
            --box-shadow: 0 10px 30px rgba(150, 120, 255, 0.15);
        }


        .rainbow-theme body {
            background: linear-gradient(135deg,
                    rgba(255, 0, 0, 0.08) 0%,
                    rgba(255, 165, 0, 0.08) 10%,
                    rgba(255, 255, 0, 0.08) 20%,
                    rgba(0, 128, 0, 0.08) 30%,
                    rgba(0, 0, 255, 0.08) 40%,
                    rgba(75, 0, 130, 0.08) 50%,
                    rgba(238, 130, 238, 0.08) 60%,
                    rgba(255, 0, 0, 0.08) 70%,
                    rgba(255, 255, 0, 0.08) 80%,
                    rgba(0, 255, 255, 0.08) 90%,
                    rgba(255, 0, 255, 0.08) 100%);
            animation: rainbow-bg-flow 30s linear infinite alternate;
            background-size: 400% 400%;
            position: relative;
            overflow-x: hidden;
        }

        .rainbow-theme body::before {
            content: "";
            position: fixed;
            z-index: -1;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image:
                url('https://www.transparenttextures.com/patterns/cubes.png'),
                linear-gradient(135deg,
                    rgba(255, 0, 0, 0.1) 0%,
                    rgba(255, 165, 0, 0.1) 12.5%,
                    rgba(255, 255, 0, 0.1) 25%,
                    rgba(0, 255, 0, 0.1) 37.5%,
                    rgba(0, 127, 255, 0.1) 50%,
                    rgba(0, 0, 255, 0.1) 62.5%,
                    rgba(139, 0, 255, 0.1) 75%,
                    rgba(255, 0, 255, 0.1) 87.5%,
                    rgba(255, 0, 0, 0.1) 100%);
            background-size: 200px, 800% 800%;
            opacity: 0.8;
            animation: rainbow-bg-slide 60s linear infinite;
            mix-blend-mode: overlay;
        }


        .rainbow-theme::after {
            content: "";
            position: fixed;
            z-index: -2;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background:
                radial-gradient(circle at 20% 20%, rgba(255, 50, 50, 0.2) 0%, rgba(255, 255, 255, 0) 40%),
                radial-gradient(circle at 80% 30%, rgba(255, 255, 50, 0.2) 0%, rgba(255, 255, 255, 0) 40%),
                radial-gradient(circle at 10% 60%, rgba(50, 255, 50, 0.2) 0%, rgba(255, 255, 255, 0) 40%),
                radial-gradient(circle at 50% 70%, rgba(50, 50, 255, 0.2) 0%, rgba(255, 255, 255, 0) 40%),
                radial-gradient(circle at 90% 90%, rgba(255, 50, 255, 0.2) 0%, rgba(255, 255, 255, 0) 40%);
            animation: rainbow-bubbles 15s ease infinite alternate;
        }


        @keyframes rainbow-bg-flow {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        @keyframes rainbow-bg-slide {
            0% {
                background-position: 0 0, 0% 50%;
            }

            100% {
                background-position: 200px 200px, 100% 50%;
            }
        }

        @keyframes rainbow-bubbles {
            0% {
                background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
                opacity: 0.8;
            }

            50% {
                opacity: 1;
            }

            100% {
                background-position: 10% 10%, -10% -10%, 5% 5%, -5% -5%, 3% 3%;
                opacity: 0.8;
            }
        }


        .rainbow-theme body::before {
            content: "";
            position: fixed;
            z-index: -1;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image:
                url('https://www.transparenttextures.com/patterns/cubes.png'),
                url('https://www.transparenttextures.com/patterns/diamond-upholstery.png'),
                linear-gradient(135deg,
                    rgba(255, 0, 0, 0.08) 0%,
                    rgba(255, 165, 0, 0.08) 12.5%,
                    rgba(255, 255, 0, 0.08) 25%,
                    rgba(0, 255, 0, 0.08) 37.5%,
                    rgba(0, 127, 255, 0.08) 50%,
                    rgba(0, 0, 255, 0.08) 62.5%,
                    rgba(139, 0, 255, 0.08) 75%,
                    rgba(255, 0, 255, 0.08) 87.5%,
                    rgba(255, 0, 0, 0.08) 100%);
            background-size: 200px, 150px, 800% 800%;
            opacity: 0.6;
            animation: rainbow-bg-slide 60s linear infinite;
            mix-blend-mode: overlay;
        }


        .rainbow-theme::after {
            content: "";
            position: fixed;
            z-index: -2;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background:
                radial-gradient(circle at 20% 20%, rgba(255, 50, 50, 0.12) 0%, rgba(255, 255, 255, 0) 40%),
                radial-gradient(circle at 80% 30%, rgba(255, 255, 50, 0.12) 0%, rgba(255, 255, 255, 0) 40%),
                radial-gradient(circle at 10% 60%, rgba(50, 255, 50, 0.12) 0%, rgba(255, 255, 255, 0) 40%),
                radial-gradient(circle at 50% 70%, rgba(50, 50, 255, 0.12) 0%, rgba(255, 255, 255, 0) 40%),
                radial-gradient(circle at 90% 90%, rgba(255, 50, 255, 0.12) 0%, rgba(255, 255, 255, 0) 40%);
            animation: rainbow-bubbles 15s ease infinite alternate;
        }

        .rainbow-theme .resume-container {
            background: rgba(255, 255, 255, 0.82);
            box-shadow:
                0 0 0 10px rgba(255, 150, 150, 0.08),
                0 24px 64px 0 rgba(120, 80, 200, 0.2),
                0 4px 22px 0 rgba(255, 120, 120, 0.18),
                0 0 0 1px rgba(255, 255, 255, 0.1) inset;
            backdrop-filter: blur(15px) saturate(130%);
            border: 2.5px solid transparent;
            border-image: linear-gradient(135deg,
                    rgba(255, 0, 0, 0.7),
                    rgba(255, 165, 0, 0.7),
                    rgba(255, 255, 0, 0.7),
                    rgba(0, 255, 0, 0.7),
                    rgba(0, 0, 255, 0.7),
                    rgba(75, 0, 130, 0.7),
                    rgba(238, 130, 238, 0.7)) 1;
            animation: container-rainbow-glow 10s ease-in-out infinite alternate;
            position: relative;
            overflow: hidden;
        }


        .rainbow-theme .resume-container::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg,
                    transparent 0%,
                    rgba(255, 255, 255, 0.05) 30%,
                    rgba(255, 255, 255, 0.3) 50%,
                    rgba(255, 255, 255, 0.05) 70%,
                    transparent 100%);
            transform: rotate(30deg);
            animation: rainbow-sheen 12s infinite linear;
            pointer-events: none;
            z-index: 2;
        }

        .rainbow-theme .rainbow-particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        .rainbow-theme .rainbow-particle {
            position: absolute;
            border-radius: 50%;
            background: linear-gradient(90deg,
                    #ff0000, #ff7f00, #ffff00, #00ff00,
                    #0000ff, #4b0082, #8b00ff);
            animation: float-particle var(--float-duration, 10s) ease-in-out infinite alternate,
                rainbow-flow 3s linear infinite;
            opacity: var(--opacity, 0.7);
            filter: blur(1px);
            z-index: 10;
        }

        @keyframes float-particle {
            0% {
                transform: translateY(0) rotate(0deg);
                opacity: var(--opacity);
            }

            100% {
                transform: translateY(calc(var(--distance) * -1px)) rotate(var(--rotation));
                opacity: 0;
            }
        }

        @keyframes rainbow-flow {
            0% {
                background-position: 0% 50%;
            }

            100% {
                background-position: 200% 50%;
            }
        }

        .rainbow-theme .resume-container:hover::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
                    rgba(255, 255, 255, 0.1) 0%,
                    transparent 70%);
            border-radius: 38px;
            z-index: 2;
            pointer-events: none;
            transition: all 0.3s ease;
        }

        .rainbow-theme .profile-pic {
            filter: brightness(1.05) contrast(1.05) saturate(1.2);
            box-shadow: 0 7px 28px rgba(150, 100, 255, 0.3), 0 0 0 3px rgba(200, 150, 255, 0.4);
            border: none;
            animation: rainbow-profile-pulse 6s infinite;
            position: relative;
            z-index: 2;
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }


        .rainbow-theme .profile-pic::before {
            content: "";
            position: absolute;
            inset: -4px;
            padding: 4px;
            border-radius: 20px;
            background: linear-gradient(45deg,
                    #ff0000, #ff7f00, #ffff00, #00ff00,
                    #0000ff, #4b0082, #8b00ff);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            background-size: 200% 200%;
            animation: rainbow-border-spin 6s linear infinite;
            z-index: -1;
        }

        .rainbow-theme .profile-pic:hover {
            filter: brightness(1.1) contrast(1.1) saturate(1.3);
            transform: scale(1.08) rotate(-3deg);
            box-shadow: 0 10px 35px rgba(150, 100, 255, 0.4), 0 0 0 4px rgba(200, 150, 255, 0.6);
        }

        @keyframes rainbow-profile-pulse {
            0% {
                box-shadow: 0 7px 28px rgba(150, 100, 255, 0.3), 0 0 0 3px rgba(200, 150, 255, 0.4);
            }

            33% {
                box-shadow: 0 7px 28px rgba(255, 100, 100, 0.3), 0 0 0 3px rgba(255, 150, 150, 0.4);
            }

            66% {
                box-shadow: 0 7px 28px rgba(100, 200, 100, 0.3), 0 0 0 3px rgba(150, 255, 150, 0.4);
            }

            100% {
                box-shadow: 0 7px 28px rgba(100, 100, 255, 0.3), 0 0 0 3px rgba(150, 150, 255, 0.4);
            }
        }

        @keyframes rainbow-border-spin {
            0% {
                background-position: 0% 0%;
            }

            100% {
                background-position: 200% 200%;
            }
        }


        .rainbow-theme .header-row {
            background: linear-gradient(90deg,
                    rgba(255, 100, 100, 0.8) 0%,
                    rgba(255, 200, 100, 0.8) 20%,
                    rgba(180, 255, 120, 0.8) 40%,
                    rgba(100, 210, 255, 0.8) 60%,
                    rgba(180, 120, 255, 0.8) 80%,
                    rgba(255, 130, 200, 0.8) 100%);
            background-size: 200% 100%;
            animation: rainbow-shift 8s linear infinite;
            box-shadow: 0 5px 25px rgba(150, 100, 255, 0.22);
            border-bottom: 2px solid rgba(200, 150, 255, 0.4);
            backdrop-filter: blur(10px);
            position: relative;
            overflow: hidden;
        }


        .rainbow-theme .header-row::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg,
                    transparent 0%,
                    rgba(255, 255, 255, 0.3) 50%,
                    transparent 100%);
            transform: skewX(-25deg);
            animation: rainbow-light-streak 7s infinite;
            z-index: 1;
        }


        .rainbow-theme .section,
        .rainbow-theme .project-section {
            background: rgba(255, 255, 255, 0.75);
            border: 2px solid transparent;
            border-image: linear-gradient(45deg,
                    rgba(255, 0, 0, 0.7) 0%,
                    rgba(255, 165, 0, 0.7) 12.5%,
                    rgba(255, 255, 0, 0.7) 25%,
                    rgba(0, 255, 0, 0.7) 37.5%,
                    rgba(0, 0, 255, 0.7) 50%,
                    rgba(75, 0, 130, 0.7) 62.5%,
                    rgba(238, 130, 238, 0.7) 75%,
                    rgba(255, 0, 127, 0.7) 87.5%,
                    rgba(255, 0, 0, 0.7) 100%) 1;
            box-shadow:
                0 10px 30px rgba(150, 150, 255, 0.2),
                0 0 15px rgba(255, 200, 200, 0.15) inset;
            backdrop-filter: blur(8px);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            overflow: hidden;
        }


        .rainbow-theme .section::after,
        .rainbow-theme .project-section::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg,
                    rgba(255, 50, 50, 0.08) 0%,
                    rgba(255, 255, 50, 0.08) 25%,
                    rgba(50, 255, 50, 0.08) 50%,
                    rgba(50, 50, 255, 0.08) 75%,
                    rgba(255, 50, 255, 0.08) 100%);
            background-size: 400% 400%;
            animation: rainbow-section-glow 8s ease infinite;
            pointer-events: none;
            border-radius: 14px;
        }


        .rainbow-theme .profile-pic {
            filter: brightness(1.05) contrast(1.05) saturate(1.2);
            box-shadow: 0 7px 28px rgba(150, 100, 255, 0.3), 0 0 0 3px rgba(200, 150, 255, 0.4);
            border: none;
            animation: rainbow-profile-pulse 6s infinite;
            position: relative;
            z-index: 2;
        }


        .rainbow-theme .profile-pic::before {
            content: "";
            position: absolute;
            inset: -4px;
            padding: 4px;
            border-radius: 20px;
            background: linear-gradient(45deg,
                    #ff0000, #ff7f00, #ffff00, #00ff00,
                    #0000ff, #4b0082, #8b00ff);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            background-size: 200% 200%;
            animation: rainbow-border-spin 6s linear infinite;
            z-index: -1;
        }

        .rainbow-theme .profile-pic:hover {
            filter: brightness(1.1) contrast(1.1) saturate(1.3);
            transform: scale(1.08) rotate(-3deg);
            box-shadow: 0 10px 35px rgba(150, 100, 255, 0.4), 0 0 0 4px rgba(200, 150, 255, 0.6);
        }


        .rainbow-theme h1 {
            background: linear-gradient(90deg,
                    #ff0000, #ff7f00, #ffff00, #00ff00,
                    #0000ff, #4b0082, #8b00ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            background-size: 200% auto;
            animation: rainbow-text 6s linear infinite;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            letter-spacing: 2px;
            position: relative;
        }


        .rainbow-theme h1::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 6px;
            height: 100%;
            background: linear-gradient(to bottom,
                    #ff0000, #ff7f00, #ffff00, #00ff00,
                    #0000ff, #4b0082, #8b00ff);
            animation: rainbow-pulse 3s infinite;
            border-radius: 3px;
        }


        .rainbow-theme .skill-item:before,
        .rainbow-theme .experience-item:before,
        .rainbow-theme .self-item:before,
        .rainbow-theme .project-item:before {
            background: linear-gradient(90deg,
                    #ff0000, #ff7f00, #ffff00, #00ff00,
                    #0000ff, #4b0082, #8b00ff);
            background-size: 200% auto;
            animation: rainbow-text 6s linear infinite;
            width: 10px;
            height: 10px;
            transform: rotate(45deg);
            border-radius: 2px;
            box-shadow: 0 0 8px rgba(150, 100, 255, 0.3);
        }

        .rainbow-theme .skill-item:hover:before,
        .rainbow-theme .experience-item:hover:before,
        .rainbow-theme .self-item:hover:before,
        .rainbow-theme .project-item:hover:before {
            animation: rainbow-rotate 3s linear infinite;
            transform: scale(1.5) rotate(45deg);
            box-shadow: 0 0 12px rgba(150, 100, 255, 0.5);
        }

        .rainbow-theme .skill-item:hover,
        .rainbow-theme .experience-item:hover,
        .rainbow-theme .self-item:hover,
        .rainbow-theme .project-item:hover {
            transform: translateX(8px) scale(1.03);
            background: linear-gradient(90deg,
                    rgba(255, 0, 0, 0.05),
                    rgba(255, 255, 0, 0.05),
                    rgba(0, 255, 0, 0.05),
                    rgba(0, 0, 255, 0.05),
                    rgba(255, 0, 255, 0.05));
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
            letter-spacing: 0.5px;
            font-weight: bold;
        }


        .rainbow-theme .project-section-title {
            background: linear-gradient(90deg,
                    #ff0000, #ff7f00, #ffff00, #00ff00,
                    #0000ff, #4b0082, #8b00ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            background-size: 200% auto;
            animation: rainbow-text 6s linear infinite;
            border-bottom: 2px solid rgba(200, 150, 255, 0.4);
            padding-bottom: 12px;
            font-weight: bold;
            letter-spacing: 0.5px;
            position: relative;
        }


        .rainbow-theme .project-section-title::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg,
                    #ff0000, #ff7f00, #ffff00, #00ff00,
                    #0000ff, #4b0082, #8b00ff);
            background-size: 200% auto;
            animation: rainbow-text 6s linear infinite;
            filter: blur(1px);
        }


        .rainbow-theme a {
            color: #6272b9;
            background: linear-gradient(90deg,
                    #d53e4f, #f46d43, #fdae61, #66c2a5,
                    #3288bd, #5e4fa2, #d53e4f);
            background-size: 200% auto;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            transition: all 0.3s ease;
            font-weight: 600;
            position: relative;
        }

        .rainbow-theme a:hover {
            background-position: 100% center;
            letter-spacing: 0.5px;
        }

        .rainbow-theme a::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg,
                    #d53e4f, #f46d43, #fdae61, #66c2a5,
                    #3288bd, #5e4fa2, #d53e4f);
            background-size: 200% auto;
            animation: rainbow-text 6s linear infinite;
            transform-origin: left;
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        .rainbow-theme a:hover::after {
            transform: scaleX(1);
        }


        .rainbow-theme .basic-info-col p {
            transition: all 0.3s ease;
            position: relative;
            padding-bottom: 4px;
            margin-bottom: 8px;
            font-weight: 500;
            letter-spacing: 0.3px;
        }

        .rainbow-theme .basic-info-col p:hover {
            transform: translateX(5px);
            background: linear-gradient(90deg,
                    #ff0000, #ff7f00, #ffff00, #00ff00,
                    #0000ff, #4b0082, #8b00ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            background-size: 200% auto;
            animation: rainbow-text 3s linear infinite;
            font-weight: 600;
            letter-spacing: 0.5px;
        }


        @keyframes rainbow-bg-flow {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        @keyframes rainbow-bg-slide {
            0% {
                background-position: 0 0, 0% 50%;
            }

            100% {
                background-position: 200px 200px, 150px 150px, 100% 50%;
            }
        }

        @keyframes rainbow-bubbles {
            0% {
                background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
                opacity: 0.6;
            }

            50% {
                opacity: 0.8;
            }

            100% {
                background-position: 10% 10%, -10% -10%, 5% 5%, -5% -5%, 3% 3%;
                opacity: 0.6;
            }
        }

        @keyframes container-rainbow-glow {
            0% {
                box-shadow:
                    0 0 0 10px rgba(255, 150, 150, 0.08),
                    0 24px 64px 0 rgba(120, 80, 200, 0.2),
                    0 4px 22px 0 rgba(255, 120, 120, 0.18);
                border-image: linear-gradient(135deg,
                        rgba(255, 0, 0, 0.7),
                        rgba(255, 165, 0, 0.7),
                        rgba(255, 255, 0, 0.7),
                        rgba(0, 255, 0, 0.7),
                        rgba(0, 0, 255, 0.7),
                        rgba(75, 0, 130, 0.7),
                        rgba(238, 130, 238, 0.7)) 1;
            }

            50% {
                box-shadow:
                    0 0 0 10px rgba(255, 200, 100, 0.12),
                    0 24px 64px 0 rgba(80, 200, 120, 0.25),
                    0 4px 22px 0 rgba(120, 120, 255, 0.22);
                border-image: linear-gradient(135deg,
                        rgba(238, 130, 238, 0.7),
                        rgba(255, 0, 0, 0.7),
                        rgba(255, 165, 0, 0.7),
                        rgba(255, 255, 0, 0.7),
                        rgba(0, 255, 0, 0.7),
                        rgba(0, 0, 255, 0.7),
                        rgba(75, 0, 130, 0.7)) 1;
            }

            100% {
                box-shadow:
                    0 0 0 10px rgba(150, 150, 255, 0.08),
                    0 24px 64px 0 rgba(200, 80, 180, 0.2),
                    0 4px 22px 0 rgba(120, 220, 120, 0.18);
                border-image: linear-gradient(135deg,
                        rgba(75, 0, 130, 0.7),
                        rgba(238, 130, 238, 0.7),
                        rgba(255, 0, 0, 0.7),
                        rgba(255, 165, 0, 0.7),
                        rgba(255, 255, 0, 0.7),
                        rgba(0, 255, 0, 0.7),
                        rgba(0, 0, 255, 0.7)) 1;
            }
        }

        @keyframes rainbow-sheen {
            0% {
                transform: rotate(30deg) translateY(100%);
            }

            100% {
                transform: rotate(30deg) translateY(-100%);
            }
        }

        @keyframes float-particle {
            0% {
                transform: translateY(0) rotate(0deg);
                opacity: var(--opacity);
            }

            100% {
                transform: translateY(calc(var(--distance) * -1px)) rotate(var(--rotation));
                opacity: 0;
            }
        }

        @keyframes rainbow-flow {
            0% {
                background-position: 0% 50%;
            }

            100% {
                background-position: 200% 50%;
            }
        }

        @keyframes rainbow-shift {
            0% {
                background-position: 0% 50%;
            }

            100% {
                background-position: 200% 50%;
            }
        }

        @keyframes rainbow-light-streak {
            0% {
                left: -100%;
            }

            100% {
                left: 200%;
            }
        }

        @keyframes rainbow-section-glow {
            0% {
                background-position: 0% 0%;
            }

            50% {
                background-position: 100% 100%;
            }

            100% {
                background-position: 0% 0%;
            }
        }

        @keyframes rainbow-profile-pulse {
            0% {
                box-shadow: 0 7px 28px rgba(150, 100, 255, 0.3), 0 0 0 3px rgba(200, 150, 255, 0.4);
            }

            33% {
                box-shadow: 0 7px 28px rgba(255, 100, 100, 0.3), 0 0 0 3px rgba(255, 150, 150, 0.4);
            }

            66% {
                box-shadow: 0 7px 28px rgba(100, 200, 100, 0.3), 0 0 0 3px rgba(150, 255, 150, 0.4);
            }

            100% {
                box-shadow: 0 7px 28px rgba(100, 100, 255, 0.3), 0 0 0 3px rgba(150, 150, 255, 0.4);
            }
        }

        @keyframes rainbow-border-spin {
            0% {
                background-position: 0% 0%;
            }

            100% {
                background-position: 200% 200%;
            }
        }

        @keyframes rainbow-pulse {
            0% {
                opacity: 0.7;
            }

            50% {
                opacity: 1;
            }

            100% {
                opacity: 0.7;
            }
        }

        @keyframes rainbow-rotate {
            0% {
                transform: scale(1.5) rotate(0deg);
            }

            100% {
                transform: scale(1.5) rotate(360deg);
            }
        }



        .galaxy-theme {
            --main-bg: linear-gradient(135deg, #051a39 0%, #0a2955 25%, #1c3d78 50%, #0c1f3c 75%, #062148 100%);
            --container-bg: rgba(16, 32, 64, 0.55);
            --section-bg: rgba(20, 36, 72, 0.55);
            --header-bg: linear-gradient(90deg, rgba(16, 30, 60, 0.65) 0%, rgba(25, 40, 80, 0.6) 50%, rgba(35, 50, 100, 0.55) 100%);
            --border-color: rgba(100, 180, 255, 0.35);
            --text-color: #e8f0ff;
            --title-color: #a0d0ff;
            --detail-color: #b8d0f8;
            --link-color: #70aef0;
            --link-hover-color: #90d8ff;
            --accent-color: rgba(120, 200, 255, 0.9);
            --box-shadow: 0 10px 35px rgba(0, 60, 120, 0.25);
        }


        .galaxy-theme body::before {
            content: "";
            position: fixed;
            z-index: -1;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #030b1a;
            background-image:
                radial-gradient(1px 1px at 10% 20%, rgba(255, 255, 255, 0.95) 1px, transparent 0),
                radial-gradient(1px 1px at 20% 50%, rgba(255, 255, 255, 0.95) 1px, transparent 0),
                radial-gradient(1px 1px at 30% 30%, rgba(255, 255, 255, 0.95) 1px, transparent 0),
                radial-gradient(2px 2px at 40% 70%, rgba(255, 255, 255, 0.9) 1px, transparent 0),
                radial-gradient(2px 2px at 50% 40%, rgba(255, 255, 255, 0.9) 1px, transparent 0),
                radial-gradient(2px 2px at 60% 60%, rgba(255, 255, 255, 0.9) 1px, transparent 0),
                radial-gradient(3px 3px at 70% 80%, rgba(255, 255, 255, 0.8) 1px, transparent 0),
                radial-gradient(3px 3px at 80% 10%, rgba(255, 255, 255, 0.8) 1px, transparent 0),
                radial-gradient(3px 3px at 90% 90%, rgba(255, 255, 255, 0.8) 1px, transparent 0);
            background-size: 200% 200%;
            opacity: 0.9;
            animation: floating-stars 100s linear infinite alternate;
        }


        .galaxy-theme::after {
            content: "";
            position: fixed;
            z-index: -2;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background:
                radial-gradient(ellipse at 20% 30%, rgba(100, 170, 255, 0.5) 0%, rgba(0, 0, 80, 0) 70%),
                radial-gradient(ellipse at 80% 70%, rgba(160, 100, 255, 0.5) 0%, rgba(0, 0, 80, 0) 70%),
                radial-gradient(ellipse at 40% 80%, rgba(255, 120, 220, 0.4) 0%, rgba(0, 0, 80, 0) 60%),
                radial-gradient(ellipse at 70% 20%, rgba(70, 220, 255, 0.4) 0%, rgba(0, 0, 80, 0) 60%),
                radial-gradient(ellipse at 50% 50%, rgba(60, 120, 220, 0.3) 0%, rgba(0, 0, 80, 0) 70%);
            opacity: 0.95;
            animation: nebula-glow 25s ease-in-out infinite alternate;
            filter: blur(15px);
        }


        .galaxy-theme .resume-container {
            background: rgba(15, 30, 60, 0.35);
            backdrop-filter: blur(25px) saturate(2.0);
            -webkit-backdrop-filter: blur(25px) saturate(2.0);
            border: 2px solid rgba(140, 210, 255, 0.4);
            box-shadow:
                0 0 0 10px rgba(30, 60, 120, 0.15),
                0 20px 60px rgba(0, 20, 80, 0.4),
                0 0 100px rgba(100, 180, 255, 0.35),
                inset 0 0 50px rgba(120, 200, 255, 0.15);
            animation: galaxy-pulse 10s ease-in-out infinite alternate;
            will-change: box-shadow, border-color;
        }

        @keyframes galaxy-pulse {
            0% {
                box-shadow:
                    0 0 0 10px rgba(30, 60, 120, 0.15),
                    0 20px 60px rgba(0, 20, 80, 0.35),
                    0 0 100px rgba(80, 150, 255, 0.25),
                    inset 0 0 40px rgba(120, 200, 255, 0.12);
                border-color: rgba(140, 210, 255, 0.35);
            }

            50% {
                border-color: rgba(160, 230, 255, 0.5);
            }

            100% {
                box-shadow:
                    0 0 0 10px rgba(50, 100, 180, 0.2),
                    0 20px 60px rgba(0, 50, 120, 0.45),
                    0 0 120px rgba(120, 200, 255, 0.45),
                    inset 0 0 60px rgba(150, 225, 255, 0.2);
                border-color: rgba(180, 240, 255, 0.6);
            }
        }

        .galaxy-theme .header-row {
            background: linear-gradient(90deg,
                    rgba(15, 25, 50, 0.55) 0%,
                    rgba(25, 40, 80, 0.5) 50%,
                    rgba(35, 50, 100, 0.45) 100%);
            border-bottom: 2px solid rgba(140, 210, 255, 0.35);
            backdrop-filter: blur(20px) saturate(1.6);
            -webkit-backdrop-filter: blur(20px) saturate(1.6);
            box-shadow: 0 5px 25px rgba(0, 20, 60, 0.3), 0 0 40px rgba(100, 180, 255, 0.2) inset;
        }

        .galaxy-theme .section,
        .galaxy-theme .project-section {
            background: rgba(20, 35, 70, 0.3);
            box-shadow: 0 8px 32px rgba(0, 20, 60, 0.35);
            border: 1.5px solid rgba(140, 210, 255, 0.35);
            backdrop-filter: blur(20px) saturate(1.8);
            -webkit-backdrop-filter: blur(20px) saturate(1.8);
            transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
        }

        .galaxy-theme .section:hover,
        .galaxy-theme .project-section:hover {
            border: 1.5px solid rgba(160, 230, 255, 0.55);
            box-shadow:
                0 15px 35px rgba(0, 20, 80, 0.45),
                0 0 35px rgba(120, 200, 255, 0.3);
            transform: translateY(-8px) scale(1.02);
            background: rgba(25, 45, 85, 0.35);
        }


        .galaxy-theme .profile-pic {
            filter: brightness(0.85) contrast(1.3) saturate(1.4);
            box-shadow:
                0 7px 25px rgba(0, 120, 255, 0.5),
                0 0 0 3px rgba(120, 200, 255, 0.6),
                0 0 30px rgba(140, 220, 255, 0.55);
            border: 3px solid rgba(160, 230, 255, 0.8);
        }

        .galaxy-theme .profile-pic:hover {
            transform: scale(1.08) rotate(-3deg);
            filter: brightness(1.05) contrast(1.3) saturate(1.5);
            box-shadow:
                0 10px 30px rgba(0, 140, 255, 0.6),
                0 0 0 4px rgba(140, 220, 255, 0.7),
                0 0 40px rgba(160, 230, 255, 0.7),
                0 0 70px rgba(140, 220, 255, 0.5);
            border: 3px solid rgba(200, 250, 255, 0.95);
        }


        .galaxy-theme .star {
            position: absolute;
            background-color: #fff;
            border-radius: 50%;
            animation: twinkle ease-in-out infinite alternate;
        }

        .galaxy-theme .star.size-1 {
            width: 1px;
            height: 1px;
            animation-duration: 3s;
        }

        .galaxy-theme .star.size-2 {
            width: 2px;
            height: 2px;
            animation-duration: 5s;
        }

        .galaxy-theme .star.size-3 {
            width: 3px;
            height: 3px;
            box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.6);
            animation-duration: 7s;
        }

        .galaxy-theme .star.size-4 {
            width: 4px;
            height: 4px;
            box-shadow: 0 0 8px 3px rgba(200, 220, 255, 0.7);
            animation-duration: 9s;
        }


        .galaxy-theme .star.size-5 {
            width: 5px;
            height: 5px;
            box-shadow: 0 0 10px 4px rgba(220, 240, 255, 0.8);
            animation-duration: 11s;
        }

        @keyframes twinkle {
            0% {
                opacity: 0.2;
                transform: scale(0.8);
                filter: blur(0px);
            }

            50% {
                opacity: 1;
                transform: scale(1.2);
                filter: blur(0.5px);
            }

            100% {
                opacity: 0.3;
                transform: scale(1);
                filter: blur(0px);
            }
        }


        .galaxy-theme .shooting-star {
            position: absolute;
            height: 2px;
            background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0));
            animation: shooting 6s linear infinite;
            animation-delay: var(--delay);
            opacity: 0;
            transform: rotate(var(--angle));
            z-index: -2;
            filter: drop-shadow(0 0 5px rgba(220, 240, 255, 0.9));
        }


        .galaxy-theme h1 {
            color: #a8d8ff;
            text-shadow:
                0 0 15px rgba(140, 220, 255, 0.8),
                0 0 25px rgba(100, 180, 255, 0.5);
            letter-spacing: 2px;
        }

        .galaxy-theme .basic-info-col p {
            color: rgba(200, 230, 255, 0.95);
            text-shadow: 0 0 12px rgba(140, 220, 255, 0.5);
        }

        .galaxy-theme .basic-info-col p:hover {
            color: rgba(230, 245, 255, 1);
            text-shadow: 0 0 18px rgba(140, 220, 255, 0.8);
        }


        .galaxy-theme .skill-item,
        .galaxy-theme .experience-item,
        .galaxy-theme .self-item,
        .galaxy-theme .project-item {
            color: rgba(200, 230, 255, 0.95);
            text-shadow: 0 0 10px rgba(140, 220, 255, 0.4);
        }

        .galaxy-theme .skill-item:hover,
        .galaxy-theme .experience-item:hover,
        .galaxy-theme .self-item:hover,
        .galaxy-theme .project-item:hover {
            color: rgba(230, 245, 255, 1);
            text-shadow: 0 0 15px rgba(140, 220, 255, 0.8);
        }

        .galaxy-theme .skill-item:before,
        .galaxy-theme .experience-item:before,
        .galaxy-theme .self-item:before,
        .galaxy-theme .project-item:before {
            background: rgba(180, 240, 255, 0.95);
            box-shadow: 0 0 12px rgba(140, 220, 255, 0.9), 0 0 18px rgba(140, 220, 255, 0.6);
            animation: galaxy-star-pulse 3s infinite alternate;
        }

        @keyframes galaxy-star-pulse {
            0% {
                transform: scale(1) rotate(45deg);
                opacity: 0.8;
            }

            50% {
                box-shadow: 0 0 15px 4px rgba(140, 220, 255, 1), 0 0 20px rgba(140, 220, 255, 0.7);
            }

            100% {
                transform: scale(1.5) rotate(45deg);
                opacity: 1;
            }
        }


        .galaxy-theme .section::before,
        .galaxy-theme .project-section::before,
        .galaxy-theme .resume-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 40%;
            background: linear-gradient(to bottom,
                    rgba(255, 255, 255, 0.15) 0%,
                    rgba(255, 255, 255, 0.05) 50%,
                    rgba(255, 255, 255, 0) 100%);
            border-radius: inherit;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            pointer-events: none;
            opacity: 0.7;
            z-index: 2;
            transition: all 0.5s ease;
        }

        .galaxy-theme .section:hover::before,
        .galaxy-theme .project-section:hover::before,
        .galaxy-theme .resume-container:hover::before {
            opacity: 0.9;
            height: 45%;
            background: linear-gradient(to bottom,
                    rgba(255, 255, 255, 0.2) 0%,
                    rgba(255, 255, 255, 0.05) 50%,
                    rgba(255, 255, 255, 0) 100%);
        }


        .galaxy-theme .project-section-title {
            color: rgba(170, 230, 255, 1);
            text-shadow:
                0 0 15px rgba(140, 220, 255, 0.7),
                0 0 30px rgba(100, 180, 255, 0.5);
            border-bottom: 1.5px solid rgba(140, 220, 255, 0.5);
            padding-bottom: 10px;
            position: relative;
        }

        .galaxy-theme a {
            color: rgba(160, 230, 255, 0.95);
            position: relative;
            z-index: 2;
        }

        .galaxy-theme a:hover {
            color: rgba(220, 240, 255, 1);
            text-shadow: 0 0 12px rgba(160, 230, 255, 0.8);
        }

        .galaxy-theme a::after {
            background-color: rgba(160, 230, 255, 0.8);
            box-shadow: 0 0 10px rgba(160, 230, 255, 0.6);
            height: 2px;
        }

        .rainbow-theme .resume-container {
            box-shadow:
                0 0 0 10px rgba(255, 150, 150, 0.08),
                0 24px 64px 0 rgba(120, 80, 200, 0.16),
                0 4px 18px 0 rgba(255, 120, 120, 0.13);
            animation: container-rainbow-glow 8s ease-in-out infinite alternate;
            background: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(12px);
        }

        @keyframes container-rainbow-glow {
            0% {
                box-shadow:
                    0 0 0 10px rgba(255, 150, 150, 0.08),
                    0 24px 64px 0 rgba(120, 80, 200, 0.16),
                    0 4px 18px 0 rgba(255, 120, 120, 0.13);
            }

            25% {
                box-shadow:
                    0 0 0 10px rgba(255, 255, 150, 0.08),
                    0 24px 64px 0 rgba(80, 200, 120, 0.16),
                    0 4px 18px 0 rgba(120, 255, 120, 0.13);
            }

            50% {
                box-shadow:
                    0 0 0 10px rgba(150, 150, 255, 0.08),
                    0 24px 64px 0 rgba(80, 120, 200, 0.16),
                    0 4px 18px 0 rgba(120, 120, 255, 0.13);
            }

            75% {
                box-shadow:
                    0 0 0 10px rgba(220, 150, 255, 0.08),
                    0 24px 64px 0 rgba(200, 80, 180, 0.16),
                    0 4px 18px 0 rgba(255, 120, 220, 0.13);
            }

            100% {
                box-shadow:
                    0 0 0 10px rgba(255, 150, 255, 0.08),
                    0 24px 64px 0 rgba(200, 120, 80, 0.16),
                    0 4px 18px 0 rgba(255, 120, 120, 0.13);
            }
        }

        .rainbow-theme .resume-container::after {
            box-shadow: 0 0 150px 0 rgba(180, 120, 255, 0.15) inset;
            animation: containerRainbowGlow 8s ease-in-out infinite alternate;
        }

        @keyframes containerRainbowGlow {
            0% {
                box-shadow: 0 0 150px 0 rgba(255, 120, 120, 0.15) inset;
            }

            33% {
                box-shadow: 0 0 150px 0 rgba(120, 255, 120, 0.15) inset;
            }

            66% {
                box-shadow: 0 0 150px 0 rgba(120, 120, 255, 0.15) inset;
            }

            100% {
                box-shadow: 0 0 150px 0 rgba(255, 120, 255, 0.15) inset;
            }
        }

        .rainbow-theme .section-content {
            position: relative;
        }

        .rainbow-theme .section-content::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
            background: radial-gradient(circle at 50% 50%,
                    rgba(255, 180, 180, 0.08) 0%,
                    rgba(180, 255, 180, 0.08) 33%,
                    rgba(180, 180, 255, 0.08) 66%,
                    rgba(255, 180, 255, 0.08) 100%);
            background-size: 200% 200%;
            animation: rainbow-radial-shift 12s ease infinite;
            border-radius: 12px;
            opacity: 0.7;
        }

        @keyframes rainbow-radial-shift {
            0% {
                background-position: 0% 0%;
            }

            50% {
                background-position: 100% 100%;
            }

            100% {
                background-position: 0% 0%;
            }
        }


        .rainbow-theme body::before {
            background-image:
                url('https://www.transparenttextures.com/patterns/cubes.png'),
                url('https://www.transparenttextures.com/patterns/symphony.png'),
                linear-gradient(45deg,
                    rgba(255, 100, 100, 0.1) 0%,
                    rgba(255, 200, 100, 0.1) 20%,
                    rgba(100, 255, 100, 0.1) 40%,
                    rgba(100, 200, 255, 0.1) 60%,
                    rgba(200, 100, 255, 0.1) 80%,
                    rgba(255, 100, 200, 0.1) 100%);
            animation: rainbow-bg-flow 20s linear infinite alternate;
            opacity: 0.3;
        }

        @keyframes rainbow-bg-flow {
            0% {
                background-position: 0% 0%, 0% 0%, 0% 0%;
            }

            100% {
                background-position: 100% 100%, 100% 100%, 100% 100%;
            }
        }

        .rainbow-theme .skill-item:before,
        .rainbow-theme .experience-item:before,
        .rainbow-theme .self-item:before,
        .rainbow-theme .project-item:before {
            background: linear-gradient(90deg,
                    #ff0000, #ff7f00, #ffff00, #00ff00,
                    #0000ff, #4b0082, #8b00ff);
            background-size: 200% auto;
            animation: rainbow-text 6s linear infinite;
            width: 10px;
            height: 10px;
            transform: rotate(45deg);
            border-radius: 2px;
        }


        @keyframes fadeTheme {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        .theme-transition {
            animation: fadeTheme 0.7s ease-in-out forwards;
        }


        .rainbow-theme .header-row {
            background: linear-gradient(90deg,
                    rgba(255, 90, 90, 0.7) 0%,
                    rgba(255, 210, 90, 0.7) 20%,
                    rgba(180, 255, 120, 0.7) 40%,
                    rgba(100, 210, 255, 0.7) 60%,
                    rgba(180, 120, 255, 0.7) 80%,
                    rgba(255, 130, 200, 0.7) 100%);
            background-size: 200% 100%;
            animation: rainbow-shift 8s linear infinite;
            box-shadow: 0 5px 25px rgba(150, 100, 255, 0.15);
            border-bottom: 2px solid rgba(200, 150, 255, 0.3);
        }

        .rainbow-theme h1 {
            background: linear-gradient(90deg,
                    #ff0000, #ff7f00, #ffff00, #00ff00,
                    #0000ff, #4b0082, #8b00ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            background-size: 200% auto;
            animation: rainbow-text 6s linear infinite;
            border-left: 6px solid transparent;
            border-image: linear-gradient(to bottom,
                    #ff0000, #ff7f00, #ffff00, #00ff00,
                    #0000ff, #4b0082, #8b00ff) 1;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            letter-spacing: 2px;
        }

        .rainbow-theme .skill-item:hover,
        .rainbow-theme .experience-item:hover,
        .rainbow-theme .self-item:hover,
        .rainbow-theme .project-item:hover {
            transform: translateX(8px) scale(1.03);
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
            background: linear-gradient(90deg,
                    #ff0000, #ff7f00, #ffff00, #00ff00,
                    #0000ff, #4b0082, #8b00ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            font-weight: bold;
        }

        @keyframes rainbow-text {
            0% {
                background-position: 0% 50%;
            }

            100% {
                background-position: 200% 50%;
            }
        }

        @keyframes rainbow-shift {
            0% {
                background-position: 0% 50%;
            }

            100% {
                background-position: 200% 50%;
            }
        }


        .theme-changed {
            animation: pulse 0.5s ease-in-out;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.1) rotate(5deg);
            }

            100% {
                transform: scale(1);
            }
        }


        body,
        .header-row,
        .section,
        .project-section,
        h1,
        .left-column,
        .right-column {
            transition: all 0.7s cubic-bezier(0.4, 0.0, 0.2, 1);
        }


        .rainbow-theme .section,
        .rainbow-theme .project-section {
            border: 2px solid transparent;
            border-image: linear-gradient(45deg,
                    #ff0000 0%,
                    #ff7f00 12.5%,
                    #ffff00 25%,
                    #00ff00 37.5%,
                    #0000ff 50%,
                    #4b0082 62.5%,
                    #8b00ff 75%,
                    #ff0066 87.5%,
                    #ff0000 100%) 1;
            box-shadow: 0 10px 30px rgba(150, 150, 255, 0.15);
            backdrop-filter: blur(5px);
        }


        .rainbow-theme .profile-pic {
            filter: brightness(1.05) contrast(1.05) saturate(1.2);
            box-shadow: 0 7px 28px rgba(150, 100, 255, 0.25), 0 0 0 3px rgba(200, 150, 255, 0.4);
            border: 3.5px solid transparent;
            border-image: linear-gradient(45deg,
                    #ff0000, #ff7f00, #ffff00, #00ff00,
                    #0000ff, #4b0082, #8b00ff) 1;
            animation: rainbow-profile-glow 6s linear infinite;
        }

        @keyframes rainbow-profile-glow {
            0% {
                box-shadow: 0 7px 28px rgba(255, 100, 100, 0.25), 0 0 0 3px rgba(255, 100, 100, 0.4);
            }

            33% {
                box-shadow: 0 7px 28px rgba(100, 255, 100, 0.25), 0 0 0 3px rgba(100, 255, 100, 0.4);
            }

            66% {
                box-shadow: 0 7px 28px rgba(100, 100, 255, 0.25), 0 0 0 3px rgba(100, 100, 255, 0.4);
            }

            100% {
                box-shadow: 0 7px 28px rgba(255, 100, 255, 0.25), 0 0 0 3px rgba(255, 100, 255, 0.4);
            }
        }


        .rainbow-theme .basic-info-col p:hover:after {
            width: 100%;
            opacity: 1;
            background: linear-gradient(90deg,
                    #ff0000, #ff7f00, #ffff00, #00ff00,
                    #0000ff, #4b0082, #8b00ff);
            animation: rainbow-text 6s linear infinite;
        }

        .rainbow-theme .basic-info-col p {
            font-weight: 500;
        }


        .galaxy-theme body {
            background-blend-mode: normal;
            position: relative;
        }

        .galaxy-theme body::before {
            content: "";
            position: fixed;
            z-index: -1;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #030b1a;
            background-image:
                radial-gradient(1px 1px at 10% 20%, rgba(255, 255, 255, 0.95) 1px, transparent 0),
                radial-gradient(1px 1px at 20% 50%, rgba(255, 255, 255, 0.95) 1px, transparent 0),
                radial-gradient(1px 1px at 30% 30%, rgba(255, 255, 255, 0.95) 1px, transparent 0),
                radial-gradient(2px 2px at 40% 70%, rgba(255, 255, 255, 0.9) 1px, transparent 0),
                radial-gradient(2px 2px at 50% 40%, rgba(255, 255, 255, 0.9) 1px, transparent 0),
                radial-gradient(2px 2px at 60% 60%, rgba(255, 255, 255, 0.9) 1px, transparent 0),
                radial-gradient(3px 3px at 70% 80%, rgba(255, 255, 255, 0.8) 1px, transparent 0),
                radial-gradient(3px 3px at 80% 10%, rgba(255, 255, 255, 0.8) 1px, transparent 0),
                radial-gradient(3px 3px at 90% 90%, rgba(255, 255, 255, 0.8) 1px, transparent 0);
            background-size: 200% 200%;
            opacity: 0.9;
            animation: floating-stars 100s linear infinite alternate;
        }

        @keyframes floating-stars {
            0% {
                background-position: 0% 0%;
                filter: brightness(0.8);
            }

            50% {
                filter: brightness(1.2);
            }

            100% {
                background-position: 100% 100%;
                filter: brightness(0.9);
            }
        }

        .galaxy-theme .star-field {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -2;
            pointer-events: none;
            perspective: 1000px;
        }

        .galaxy-theme .star {
            position: absolute;
            background-color: #fff;
            border-radius: 50%;
            animation: twinkle ease-in-out infinite alternate;
            transform-style: preserve-3d;
            will-change: transform, opacity;
        }

        .galaxy-theme .star.size-1 {
            width: 1px;
            height: 1px;
            animation-duration: 3s;
        }

        .galaxy-theme .star.size-2 {
            width: 2px;
            height: 2px;
            animation-duration: 5s;
        }

        .galaxy-theme .star.size-3 {
            width: 3px;
            height: 3px;
            box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.6);
            animation-duration: 7s;
        }

        .galaxy-theme .star.size-4 {
            width: 4px;
            height: 4px;
            box-shadow: 0 0 8px 3px rgba(200, 220, 255, 0.7);
            animation-duration: 9s;
        }

        .galaxy-theme .star.size-5 {
            width: 5px;
            height: 5px;
            box-shadow: 0 0 10px 4px rgba(220, 240, 255, 0.8), 0 0 20px 10px rgba(200, 220, 255, 0.4);
            animation-duration: 11s;
        }

        @keyframes twinkle {
            0% {
                opacity: 0.2;
                transform: scale(0.8) translateZ(var(--depth, 0px));
                filter: blur(0px);
            }

            50% {
                opacity: 1;
                transform: scale(1.2) translateZ(var(--depth, 0px));
                filter: blur(0.5px);
            }

            100% {
                opacity: 0.3;
                transform: scale(1) translateZ(var(--depth, 0px));
                filter: blur(0px);
            }
        }


        .galaxy-theme .shooting-star {
            position: absolute;
            height: 3px;
            background: linear-gradient(to right,
                    rgba(255, 255, 255, 0),
                    rgba(255, 255, 255, 0.3) 20%,
                    rgba(255, 255, 255, 1) 40%,
                    rgba(200, 220, 255, 1) 50%,
                    rgba(255, 255, 255, 1) 60%,
                    rgba(255, 255, 255, 0.3) 80%,
                    rgba(255, 255, 255, 0));
            animation: shooting 6s linear infinite;
            animation-delay: var(--delay);
            opacity: 0;
            transform: rotate(var(--angle));
            z-index: -2;
            filter: drop-shadow(0 0 5px rgba(220, 240, 255, 0.8));
        }

        @keyframes shooting {
            0% {
                transform: translateX(-100px) rotate(var(--angle));
                width: 0;
                opacity: 0;
            }

            5% {
                width: var(--size);
                opacity: 1;
            }

            10% {
                transform: translateX(calc(var(--size) * 2.5)) rotate(var(--angle));
                width: 0;
                opacity: 0;
            }

            100% {
                transform: translateX(calc(var(--size) * 2.5)) rotate(var(--angle));
                width: 0;
                opacity: 0;
            }
        }


        .galaxy-theme::after {
            content: "";
            position: fixed;
            z-index: -2;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background:
                radial-gradient(ellipse at 20% 30%, rgba(100, 170, 255, 0.5) 0%, rgba(0, 0, 80, 0) 70%),
                radial-gradient(ellipse at 80% 70%, rgba(160, 100, 255, 0.5) 0%, rgba(0, 0, 80, 0) 70%),
                radial-gradient(ellipse at 40% 80%, rgba(255, 120, 220, 0.4) 0%, rgba(0, 0, 80, 0) 60%),
                radial-gradient(ellipse at 70% 20%, rgba(70, 220, 255, 0.4) 0%, rgba(0, 0, 80, 0) 60%),
                radial-gradient(ellipse at 50% 50%, rgba(60, 120, 220, 0.3) 0%, rgba(0, 0, 80, 0) 70%);
            opacity: 0.95;
            animation: nebula-glow 25s ease-in-out infinite alternate;
            filter: blur(15px);
        }

        @keyframes nebula-glow {
            0% {
                background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
                filter: hue-rotate(0deg) blur(15px) brightness(1);
            }

            33% {
                filter: hue-rotate(15deg) blur(18px) brightness(1.2);
            }

            66% {
                filter: hue-rotate(25deg) blur(20px) brightness(1.1);
            }

            100% {
                background-position: 10% 20%, -10% -20%, 5% 10%, -5% -10%, 0% 5%;
                filter: hue-rotate(30deg) blur(15px) brightness(0.9);
            }
        }

        .galaxy-theme .resume-container {
            background: rgba(15, 30, 60, 0.35);
            backdrop-filter: blur(25px) saturate(2.0);
            -webkit-backdrop-filter: blur(25px) saturate(2.0);
            border: 2px solid rgba(140, 210, 255, 0.4);
            box-shadow:
                0 0 0 10px rgba(30, 60, 120, 0.15),
                0 20px 60px rgba(0, 20, 80, 0.4),
                0 0 100px rgba(100, 180, 255, 0.35),
                inset 0 0 50px rgba(120, 200, 255, 0.15);
            animation: galaxy-pulse 10s ease-in-out infinite alternate;
            will-change: box-shadow, border-color;
        }

        @keyframes galaxy-pulse {
            0% {
                box-shadow:
                    0 0 0 10px rgba(30, 60, 120, 0.15),
                    0 20px 60px rgba(0, 20, 80, 0.35),
                    0 0 100px rgba(80, 150, 255, 0.25),
                    inset 0 0 40px rgba(120, 200, 255, 0.12);
                border-color: rgba(140, 210, 255, 0.35);
            }

            50% {
                border-color: rgba(160, 230, 255, 0.5);
            }

            100% {
                box-shadow:
                    0 0 0 10px rgba(50, 100, 180, 0.2),
                    0 20px 60px rgba(0, 50, 120, 0.45),
                    0 0 120px rgba(120, 200, 255, 0.45),
                    inset 0 0 60px rgba(150, 225, 255, 0.2);
                border-color: rgba(180, 240, 255, 0.6);
            }
        }


        .galaxy-theme .skill-item:before,
        .galaxy-theme .experience-item:before,
        .galaxy-theme .self-item:before,
        .galaxy-theme .project-item:before {
            background: rgba(160, 230, 255, 0.95);
            box-shadow: 0 0 10px rgba(120, 200, 255, 0.9), 0 0 15px rgba(120, 200, 255, 0.5);
            animation: galaxy-star-pulse 3s infinite alternate;
        }

        @keyframes galaxy-star-pulse {
            0% {
                transform: scale(1) rotate(45deg);
                opacity: 0.8;
            }

            50% {
                box-shadow: 0 0 12px 3px rgba(120, 200, 255, 1), 0 0 18px rgba(120, 200, 255, 0.6);
            }

            100% {
                transform: scale(1.4) rotate(45deg);
                opacity: 1;
            }
        }


        .galaxy-theme h1 {
            color: #a8d8ff;
            text-shadow: 0 0 12px rgba(120, 200, 255, 0.6);
            letter-spacing: 2px;
        }

        .galaxy-theme .basic-info-col p {
            color: rgba(200, 230, 255, 0.95);
            text-shadow: 0 0 10px rgba(120, 200, 255, 0.4);
            transition: all 0.3s ease;
        }

        .galaxy-theme .basic-info-col p:hover {
            color: rgba(220, 240, 255, 1);
            text-shadow: 0 0 15px rgba(120, 200, 255, 0.7);
            transform: translateX(5px) scale(1.05);
        }

        .galaxy-theme .basic-info-col p:hover:after {
            width: 100%;
            opacity: 1;
            background: linear-gradient(90deg,
                    #ff0000, #ff7f00, #ffff00, #00ff00,
                    #0000ff, #4b0082, #8b00ff);
            animation: rainbow-text 6s linear infinite;
        }


        .galaxy-theme .profile-pic {
            filter: brightness(1.15) contrast(1.15) saturate(1.3);
            box-shadow:
                0 7px 25px rgba(0, 120, 255, 0.4),
                0 0 0 3px rgba(100, 180, 255, 0.5),
                0 0 25px rgba(120, 200, 255, 0.5);
            border: 3px solid rgba(130, 210, 255, 0.7);
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .galaxy-theme .profile-pic:hover {
            transform: scale(1.08) rotate(-3deg);
            filter: brightness(1.25) contrast(1.25) saturate(1.4);
            box-shadow:
                0 10px 30px rgba(0, 140, 255, 0.5),
                0 0 0 4px rgba(120, 200, 255, 0.6),
                0 0 35px rgba(140, 220, 255, 0.6),
                0 0 70px rgba(120, 200, 255, 0.4);
            border: 3px solid rgba(180, 240, 255, 0.9);
        }


        body {
            min-height: 100vh;
            margin: 0;
            padding: 0;
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            color: var(--text-color);
            line-height: 1.6;

            background: var(--main-bg);
            background-blend-mode: lighten, lighten, lighten, normal, normal, lighten, lighten;
            position: relative;
            overflow-x: hidden;
            animation: bgFlow 32s linear infinite alternate;
            transition: all 0.7s ease-in-out;
        }

        body::before {
            content: "";
            position: fixed;
            z-index: 0;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            opacity: 0.22;
            /* 微粒子玻璃拟态纹理+动态流光 */
            background: url('https://www.transparenttextures.com/patterns/cubes.png'),
                url('https://www.transparenttextures.com/patterns/symphony.png'),
                linear-gradient(120deg, rgba(120, 180, 255, 0.08) 0%, rgba(255, 255, 255, 0.0) 100%);
            background-size: 320px, 180px, 100% 100%;
            mix-blend-mode: lighten;
            animation: glassLight 18s ease-in-out infinite alternate;
        }

        @keyframes bgFlow {
            0% {
                background-position: 0% 0%, 50% 0%, 50% 100%, 0% 0%, 100% 100%, 0% 100%, 100% 0%;
            }

            100% {
                background-position: 100% 100%, 50% 0%, 50% 100%, 100% 100%, 0% 0%, 100% 0%, 0% 100%;
            }
        }

        @keyframes glassLight {
            0% {
                filter: blur(0px) brightness(1.05);
            }

            100% {
                filter: blur(2.5px) brightness(1.18);
            }
        }

        .resume-container {
            max-width: 1200px;
            margin: 48px auto;
            background: var(--container-bg);
            border: 2.5px solid var(--border-color);
            border-radius: 38px;
            box-shadow: var(--box-shadow),
                0 0 0 10px rgba(120, 180, 255, 0.08),
                0 24px 64px 0 rgba(80, 120, 200, 0.10),
                0 4px 18px 0 rgba(120, 180, 255, 0.10);
            padding: 0;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            backdrop-filter: blur(18px) saturate(1.12);
            transition: all 0.7s cubic-bezier(.4, 2, .6, 1);
        }

        .resume-container::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            border-radius: 38px;
            box-shadow: 0 0 120px 0 rgba(120, 180, 255, 0.13) inset;
            z-index: 1;
            animation: containerGlow 8s ease-in-out infinite alternate;
        }

        @keyframes containerGlow {
            0% {
                box-shadow: 0 0 120px 0 rgba(120, 180, 255, 0.13) inset;
            }

            100% {
                box-shadow: 0 0 180px 0 rgba(120, 180, 255, 0.19) inset;
            }
        }

        .header-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--header-bg);
            box-shadow: 0 2px 18px 0 rgba(120, 180, 255, 0.10);
            border-bottom: 2px solid var(--border-color);
            border-radius: 18px 18px 0 0;
            padding: 38px 54px;
            width: 100%;
            box-sizing: border-box;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px) saturate(1.10);
            transition: all 0.7s ease-in-out;
        }

        .header-row::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background:
                radial-gradient(circle at 20% 50%, rgba(173, 216, 230, 0.13) 0%, rgba(173, 216, 230, 0) 50%),
                radial-gradient(circle at 80% 50%, rgba(135, 206, 235, 0.08) 0%, rgba(135, 206, 235, 0) 60%);
            z-index: 0;
        }


        .profile-pic {
            width: 180px;
            height: auto;
            aspect-ratio: 1/1;
            object-fit: contain;
            border-radius: 18px;
            border: 3.5px solid #e3f0ff;
            box-shadow: 0 7px 28px rgba(120, 180, 255, 0.13);
            background: #f5faff;
            transition: all 0.3s cubic-bezier(.4, 2, .6, 1), filter 0.7s ease;
            position: relative;
            z-index: 2;
            cursor: pointer;
        }

        .profile-pic:hover {
            transform: scale(1.07) rotate(-2deg);
            box-shadow: 0 12px 32px rgba(120, 180, 255, 0.18);
            border: 3.5px solid #b3d8ff;
        }


        .section:hover,
        .project-section:hover {
            transform: translateY(-5px) scale(1.01);
            box-shadow: 0 15px 35px rgba(70, 130, 220, 0.08), 0 5px 15px rgba(0, 0, 0, 0.04);
        }


        @keyframes fadeInResume {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .resume-container {
            animation: fadeInResume 1s ease-out forwards;
        }


        .theme-notifier {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255, 255, 255, 0.95);
            color: #333;
            padding: 15px 30px;
            border-radius: 50px;
            font-weight: bold;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
            z-index: 100;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
            font-size: 16px;
            letter-spacing: 1px;
        }


        html {
            scroll-behavior: smooth;
        }

        .header-left {
            display: flex;
            flex: 2;
            justify-content: flex-start;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        .header-right {
            display: flex;
            flex: 1;
            justify-content: flex-end;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        .basic-info-col {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 10px;
            margin-right: 60px;
        }

        .basic-info-col p {
            margin: 0;
            font-size: 18px;
            color: var(--detail-color);
            letter-spacing: 1px;
            text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
            transition: all 0.3s ease;
            position: relative;
            padding-bottom: 3px;
            font-weight: 500;
        }

        .basic-info-col p:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg,
                    #ff0000, #ff7f00, #ffff00, #00ff00,
                    #0000ff, #4b0082, #8b00ff);
            transition: width 0.3s ease;
            opacity: 0;
        }

        .basic-info-col p:hover {
            transform: translateX(3px);
        }

        .basic-info-col p:hover:after {
            width: 100%;
            opacity: 1;
        }

        .basic-info-col p:hover {
            background: linear-gradient(90deg,
                    #ff0000, #ff7f00, #ffff00, #00ff00,
                    #0000ff, #4b0082, #8b00ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: none;
        }

        .profile-pic-container {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .main-content {
            display: flex;
            width: 100%;
            box-sizing: border-box;
            min-height: 700px;
        }

        .left-column,
        .right-column {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 36px;
            box-sizing: border-box;
        }

        .left-column {
            border-right: 1.5px solid var(--border-color);
            background: linear-gradient(135deg, var(--section-bg) 0%, var(--section-bg) 100%);
            transition: all 0.7s ease-in-out;
        }

        .right-column {
            background: linear-gradient(135deg, var(--section-bg) 0%, var(--section-bg) 100%);
            transition: all 0.7s ease-in-out;
        }

        h1 {
            color: var(--title-color);
            font-size: 26px;
            margin-top: 0;
            margin-bottom: 22px;
            border-left: 6px solid var(--accent-color);
            padding-left: 18px;
            letter-spacing: 1.7px;
            font-weight: 700;
            display: flex;
            align-items: center;
            transition: all 0.7s ease-in-out;
            text-shadow: 0 2px 8px rgba(120, 180, 255, 0.10);
        }

        .section {
            background: var(--section-bg);
            border-radius: 16px;
            box-shadow: 0 4px 16px rgba(120, 180, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.02);
            border: 1.5px solid var(--border-color);
            padding: 30px;
            margin-bottom: 28px;
            height: calc(33.33% - 19px);
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            transition: all 0.3s cubic-bezier(.4, 2, .6, 1);
            backdrop-filter: blur(6px);
            position: relative;
            overflow: hidden;
        }

        .section:last-child {
            margin-bottom: 0;
        }

        .project-section {
            background: var(--section-bg);
            border-radius: 16px;
            box-shadow: 0 4px 16px rgba(120, 180, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.02);
            border: 1.5px solid var(--border-color);
            padding: 30px;
            height: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            transition: all 0.3s cubic-bezier(.4, 2, .6, 1);
            backdrop-filter: blur(6px);
            position: relative;
            overflow: hidden;
        }

        .section-content {
            flex: 1;
            overflow: auto;
        }

        p {
            font-size: 16px;
            color: var(--detail-color);
            line-height: 1.8;
            margin: 8px 0;
        }

        a {
            color: var(--link-color);
            text-decoration: none;
            font-weight: 500;
            transition: all 0.2s ease;
            position: relative;
        }

        a:hover {
            color: var(--link-hover-color);
            text-decoration: underline;
        }

        a:after {
            content: '';
            position: absolute;
            width: 0;
            height: 1px;
            bottom: 0;
            left: 0;
            background-color: var(--link-hover-color);
            transition: width 0.3s ease;
        }

        a:hover:after {
            width: 100%;
        }

        .skill-item,
        .experience-item,
        .self-item {
            margin-bottom: 10px;
            position: relative;
            padding-left: 22px;
            transition: all 0.3s cubic-bezier(.4, 2, .6, 1);
            color: var(--detail-color);
        }

        .skill-item:before,
        .experience-item:before,
        .self-item:before {
            content: "";
            position: absolute;
            left: 0;
            top: 10px;
            width: 8px;
            height: 8px;
            background: var(--accent-color);
            border-radius: 50%;
            transition: all 0.2s cubic-bezier(.4, 2, .6, 1);
        }

        .skill-item:hover:before,
        .experience-item:hover:before,
        .self-item:hover:before {
            background: #3377cc;
            transform: scale(1.2);
            box-shadow: 0 0 5px rgba(51, 119, 204, 0.4);
        }

        .skill-item:after,
        .experience-item:after,
        .self-item:after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 22px;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg,
                    #ff0000, #ff7f00, #ffff00, #00ff00,
                    #0000ff, #4b0082, #8b00ff);
            transition: width 0.3s cubic-bezier(.4, 2, .6, 1);
            opacity: 0;
        }

        .skill-item:hover:after,
        .experience-item:hover:after,
        .self-item:hover:after {
            width: calc(100% - 22px);
            opacity: 1;
        }

        .skill-item:hover,
        .experience-item:hover,
        .self-item:hover {
            transform: translateX(5px) scale(1.01);
        }

        .project-header {
            display: flex;
            align-items: center;
            margin-bottom: 18px;
        }

        .project-title {
            flex: 1;
        }

        .project-section-title {
            font-weight: bold;
            color: var(--title-color);
            margin-top: 20px;
            margin-bottom: 14px;
            font-size: 20px;
            border-bottom: 1.5px solid rgba(120, 180, 255, 0.18);
            padding-bottom: 7px;
            text-shadow: 0 1px 6px rgba(120, 180, 255, 0.08);
        }

        .project-item {
            margin-bottom: 12px;
            position: relative;
            padding-left: 22px;
            transition: all 0.3s cubic-bezier(.4, 2, .6, 1);
            color: var(--detail-color);
        }

        .project-item:before {
            content: "";
            position: absolute;
            left: 0;
            top: 10px;
            width: 8px;
            height: 8px;
            background: var(--accent-color);
            border-radius: 50%;
            transition: all 0.2s cubic-bezier(.4, 2, .6, 1);
        }

        .project-item:hover:before {
            background: #2266bb;
            transform: scale(1.2);
            box-shadow: 0 0 5px rgba(34, 102, 187, 0.4);
        }

        .project-item:after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 22px;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg,
                    #ff0000, #ff7f00, #ffff00, #00ff00,
                    #0000ff, #4b0082, #8b00ff);
            transition: width 0.3s cubic-bezier(.4, 2, .6, 1);
            opacity: 0;
        }

        .project-item:hover:after {
            width: calc(100% - 22px);
            opacity: 1;
        }

        .project-item:hover {
            transform: translateX(5px) scale(1.01);
        }

        @media (max-width: 1100px) {
            .main-content {
                flex-direction: column;
            }

            .left-column,
            .right-column {
                border-right: none;
                padding: 22px;
            }

            .section {
                height: auto;
                margin-bottom: 22px;
            }

            .header-row {
                flex-direction: column;
                padding: 28px 18px;
            }

            .header-left {
                flex-direction: column;
                margin-bottom: 22px;
            }

            .basic-info-col {
                margin-right: 0;
                margin-bottom: 22px;
            }
        }

        @media (max-width: 700px) {
            .header-row {
                padding: 18px 8px;
            }

            .profile-pic {
                width: 120px;
            }

            .section,
            .project-section {
                padding: 10px;
            }
        }

        .rainbow-gradient {
            background-image: linear-gradient(90deg,
                    #ff0000, #ff7f00, #ffff00, #00ff00,
                    #0000ff, #4b0082, #8b00ff);
            background-size: 200% auto;
            animation: rainbow 6s linear infinite;
        }

        @keyframes rainbow {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }


        .rainbow-theme .theme-notifier {
            background: linear-gradient(90deg,
                    rgba(255, 100, 100, 0.9),
                    rgba(255, 200, 100, 0.9),
                    rgba(100, 255, 100, 0.9),
                    rgba(100, 200, 255, 0.9),
                    rgba(200, 100, 255, 0.9));
            color: white;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }

        .show-notifier {
            opacity: 1;
            animation: fadeInUp 0.5s ease-out forwards, fadeOut 0.5s ease-in forwards 2s;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translate(-50%, 20px);
            }

            to {
                opacity: 1;
                transform: translate(-50%, 0);
            }
        }

        @keyframes fadeOut {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
            }
        }

        .galaxy-theme .theme-notifier {
            background: rgba(20, 40, 80, 0.8);
            color: rgba(200, 230, 255, 1);
            text-shadow: 0 0 10px rgba(140, 220, 255, 0.7);
            box-shadow:
                0 0 20px rgba(100, 180, 255, 0.4),
                0 0 40px rgba(100, 180, 255, 0.2);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(140, 220, 255, 0.4);
        }


        body.theme-transition {
            animation: theme-fade 0.7s ease-in-out;
        }

        @keyframes theme-fade {
            0% {
                opacity: 0.5;
                transform: scale(0.98);
            }

            100% {
                opacity: 1;
                transform: scale(1);
            }
        }


        .rainbow-theme .skill-item:hover:before,
        .rainbow-theme .experience-item:hover:before,
        .rainbow-theme .self-item:hover:before,
        .rainbow-theme .project-item:hover:before {
            animation: rainbow-rotate 3s linear infinite;
            transform: scale(1.5) rotate(45deg);
            border-radius: 2px;
        }

        @keyframes rainbow-rotate {
            0% {
                transform: scale(1.5) rotate(0deg);
            }

            100% {
                transform: scale(1.5) rotate(360deg);
            }
        }


        .rainbow-theme .section:before,
        .rainbow-theme .project-section:before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            z-index: -1;
            background: linear-gradient(45deg,
                    #ff0000, #ff7f00, #ffff00, #00ff00,
                    #0000ff, #4b0082, #8b00ff);
            background-size: 400% 400%;
            animation: rainbow-border-flow 6s linear infinite;
            border-radius: 18px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .rainbow-theme .section:hover:before,
        .rainbow-theme .project-section:hover:before {
            opacity: 0.6;
        }

        @keyframes rainbow-border-flow {
            0% {
                background-position: 0% 0%;
            }

            50% {
                background-position: 100% 100%;
            }

            100% {
                background-position: 0% 0%;
            }
        }


        .galaxy-theme .section:after,
        .galaxy-theme .project-section:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image:
                radial-gradient(1px 1px at calc(10% + var(--x, 0%)) calc(20% + var(--y, 0%)), rgba(255, 255, 255, 0.8) 1px, transparent 0),
                radial-gradient(1px 1px at calc(25% + var(--x, 0%)) calc(50% + var(--y, 0%)), rgba(255, 255, 255, 0.8) 1px, transparent 0),
                radial-gradient(1px 1px at calc(40% + var(--x, 0%)) calc(30% + var(--y, 0%)), rgba(255, 255, 255, 0.8) 1px, transparent 0),
                radial-gradient(2px 2px at calc(55% + var(--x, 0%)) calc(70% + var(--y, 0%)), rgba(255, 255, 255, 0.7) 1px, transparent 0),
                radial-gradient(2px 2px at calc(70% + var(--x, 0%)) calc(40% + var(--y, 0%)), rgba(255, 255, 255, 0.7) 1px, transparent 0),
                radial-gradient(2px 2px at calc(85% + var(--x, 0%)) calc(60% + var(--y, 0%)), rgba(255, 255, 255, 0.7) 1px, transparent 0);
            opacity: 0.3;
            pointer-events: none;
            z-index: 1;
        }


        .galaxy-theme .section:before,
        .galaxy-theme .project-section:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background:
                radial-gradient(ellipse at center, rgba(100, 180, 255, 0.15) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.8s ease;
            z-index: 0;
        }

        .galaxy-theme .section:hover:before,
        .galaxy-theme .project-section:hover:before {
            opacity: 1;
        }


        .section:hover h1,
        .project-section:hover h1 {
            transform: translateX(5px);
        }


        .theme-notifier {
            transform: translateX(-50%) translateY(20px);
            animation: none;
            opacity: 0;
            transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease;
        }

        .show-notifier {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
            animation: vibrate 0.5s ease-in-out, fade-out 0.5s ease-out 2s forwards;
        }

        @keyframes vibrate {

            0%,
            100% {
                transform: translateX(-50%) translateY(0);
            }

            10%,
            30%,
            50%,
            70%,
            90% {
                transform: translateX(-52%) translateY(0);
            }

            20%,
            40%,
            60%,
            80% {
                transform: translateX(-48%) translateY(0);
            }
        }

        @keyframes fade-out {
            to {
                opacity: 0;
                transform: translateX(-50%) translateY(10px);
            }
        }

        .galaxy-theme .section,
        .galaxy-theme .project-section {
            background: rgba(25, 45, 90, 0.7);
            box-shadow: 0 8px 35px rgba(0, 20, 60, 0.35);
            border: 1.5px solid rgba(120, 200, 255, 0.35);
            backdrop-filter: blur(15px) saturate(1.3);
            transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
        }

        .galaxy-theme .header-row {
            background: linear-gradient(90deg,
                    rgba(20, 35, 70, 0.8) 0%,
                    rgba(30, 50, 100, 0.75) 50%,
                    rgba(40, 60, 120, 0.7) 100%);
            border-bottom: 2px solid rgba(120, 200, 255, 0.3);
            backdrop-filter: blur(15px) saturate(1.3);
        }


        .galaxy-theme .skill-item:hover,
        .galaxy-theme .experience-item:hover,
        .galaxy-theme .self-item:hover,
        .galaxy-theme .project-item:hover {
            color: rgba(160, 220, 255, 1);
            text-shadow: 0 0 8px rgba(100, 180, 255, 0.5);
            transform: translateX(8px);
        }


        .galaxy-theme .basic-info-col p {
            color: rgba(180, 220, 255, 0.95);
            text-shadow: 0 0 8px rgba(100, 180, 255, 0.3);
        }

        .galaxy-theme .basic-info-col p:hover {
            color: rgba(200, 230, 255, 1);
            text-shadow: 0 0 12px rgba(100, 180, 255, 0.5);
        }


        .galaxy-theme .cosmic-dust {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -2;
            pointer-events: none;
        }

        .galaxy-theme .dust-particle {
            position: absolute;
            width: 1px;
            height: 1px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.8);
            box-shadow: 0 0 4px 1px rgba(120, 200, 255, 0.4);
            animation: float-dust var(--float-duration) ease-in-out infinite alternate;
            opacity: var(--opacity);
        }

        @keyframes float-dust {
            0% {
                transform: translate(0, 0) scale(1);
                opacity: var(--opacity);
            }

            50% {
                opacity: var(--opacity) * 1.5;
            }

            100% {
                transform: translate(var(--translate-x), var(--translate-y)) scale(1.2);
                opacity: var(--opacity);
            }
        }


        .galaxy-theme .project-section-title {
            color: rgba(140, 210, 255, 1);
            text-shadow:
                0 0 10px rgba(100, 180, 255, 0.5),
                0 0 20px rgba(100, 180, 255, 0.3);
            border-bottom: 1.5px solid rgba(100, 180, 255, 0.4);
            padding-bottom: 10px;
            position: relative;
        }

        .galaxy-theme .project-section-title::after {
            content: "";
            position: absolute;
            bottom: -1.5px;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg,
                    rgba(100, 180, 255, 0.2),
                    rgba(140, 210, 255, 0.9) 50%,
                    rgba(100, 180, 255, 0.2));
            filter: blur(1px);
        }


        .galaxy-theme .section:hover,
        .galaxy-theme .project-section:hover {
            border: 1.5px solid rgba(140, 210, 255, 0.5);
            box-shadow:
                0 15px 35px rgba(0, 20, 80, 0.4),
                0 0 25px rgba(100, 180, 255, 0.2);
            transform: translateY(-7px) scale(1.02);
            background: rgba(30, 55, 100, 0.75);
        }


        .galaxy-theme a {
            color: rgba(140, 210, 255, 0.9);
            position: relative;
            z-index: 2;
        }

        .galaxy-theme a:hover {
            color: rgba(200, 230, 255, 1);
            text-shadow: 0 0 8px rgba(140, 210, 255, 0.8);
        }

        .galaxy-theme a::after {
            background-color: rgba(140, 210, 255, 0.7);
            box-shadow: 0 0 8px rgba(140, 210, 255, 0.5);
        }


        .galaxy-theme .orbital-system {
            position: fixed;
            top: 75%;
            right: 10%;
            width: 160px;
            height: 160px;
            z-index: -2;
            pointer-events: none;
        }

        .galaxy-theme .orbital-planet {
            position: absolute;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            top: 65px;
            left: 65px;
            background: radial-gradient(circle at 35% 35%,
                    rgba(120, 200, 255, 1),
                    rgba(60, 120, 200, 0.8),
                    rgba(30, 60, 120, 0.8));
            box-shadow:
                0 0 20px 5px rgba(120, 200, 255, 0.6),
                0 0 40px 10px rgba(100, 180, 255, 0.3);
            animation: planet-pulse 8s ease-in-out infinite alternate;
        }

        .galaxy-theme .orbital-ring {
            position: absolute;
            width: 160px;
            height: 160px;
            border-radius: 50%;
            top: 0;
            left: 0;
            border: 1px solid rgba(160, 230, 255, 0.6);
            box-shadow: 0 0 15px 2px rgba(120, 200, 255, 0.4);
            animation: orbit-rotation 60s linear infinite;
        }

        .galaxy-theme .orbital-moon {
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: rgba(220, 240, 255, 0.95);
            box-shadow: 0 0 10px 3px rgba(160, 230, 255, 0.7);
            top: 0;
            left: 75px;
            animation: moon-orbit 10s linear infinite;
        }

        @keyframes orbit-rotation {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        @keyframes moon-orbit {
            from {
                transform: rotate(0deg) translateX(80px) rotate(0deg);
            }

            to {
                transform: rotate(360deg) translateX(80px) rotate(-360deg);
            }
        }


        .galaxy-theme .resume-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 100%;
            background: linear-gradient(135deg,
                    rgba(255, 255, 255, 0.12) 0%,
                    rgba(255, 255, 255, 0.05) 15%,
                    rgba(255, 255, 255, 0) 50%,
                    rgba(255, 255, 255, 0) 85%,
                    rgba(255, 255, 255, 0.05) 100%);
            border-radius: 38px;
            pointer-events: none;
            z-index: 1;
        }


        .galaxy-theme .section::before,
        .galaxy-theme .project-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 40%;
            background: linear-gradient(to bottom,
                    rgba(255, 255, 255, 0.1) 0%,
                    rgba(255, 255, 255, 0) 100%);
            border-radius: 16px 16px 0 0;
            pointer-events: none;
            opacity: 0.5;
            transition: opacity 0.5s ease;
        }

        .galaxy-theme .section:hover::before,
        .galaxy-theme .project-section:hover::before {
            opacity: 0.8;
        }

        .galaxy-theme .header-row::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 60%;
            background: linear-gradient(to bottom,
                    rgba(255, 255, 255, 0.12) 0%,
                    rgba(255, 255, 255, 0) 100%);
            border-radius: 18px 18px 0 0;
            pointer-events: none;
            z-index: 1;
        }

        .galaxy-theme .section::after,
        .galaxy-theme .project-section::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 16px;
            pointer-events: none;
            z-index: -1;
            opacity: 0;
            background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
                    rgba(120, 200, 255, 0.2) 0%,
                    transparent 70%);
            transition: opacity 0.5s ease;
        }

        .galaxy-theme .section:hover::after,
        .galaxy-theme .project-section:hover::after {
            opacity: 1;
        }

        @keyframes planet-pulse {
            0% {
                box-shadow:
                    0 0 20px 5px rgba(120, 200, 255, 0.6),
                    0 0 40px 10px rgba(100, 180, 255, 0.3);
            }

            100% {
                box-shadow:
                    0 0 25px 8px rgba(140, 220, 255, 0.7),
                    0 0 50px 15px rgba(120, 200, 255, 0.4);
            }
        }


        .galaxy-theme .skill-item,
        .galaxy-theme .experience-item,
        .galaxy-theme .self-item,
        .galaxy-theme .project-item {
            color: rgba(190, 225, 255, 0.95);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .galaxy-theme .skill-item:hover,
        .galaxy-theme .experience-item:hover,
        .galaxy-theme .self-item:hover,
        .galaxy-theme .project-item:hover {
            color: rgba(220, 240, 255, 1);
            text-shadow: 0 0 12px rgba(130, 210, 255, 0.6);
            transform: translateX(8px) scale(1.05);
            letter-spacing: 0.5px;
        }


        .galaxy-theme .project-section-title {
            color: rgba(160, 230, 255, 1);
            text-shadow:
                0 0 12px rgba(120, 200, 255, 0.6),
                0 0 25px rgba(120, 200, 255, 0.4);
            border-bottom: 1.5px solid rgba(120, 200, 255, 0.5);
            padding-bottom: 10px;
            position: relative;
        }

        .galaxy-theme .project-section-title::after {
            content: "";
            position: absolute;
            bottom: -1.5px;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg,
                    rgba(120, 200, 255, 0.3),
                    rgba(160, 230, 255, 1) 50%,
                    rgba(120, 200, 255, 0.3));
            filter: blur(1px);
        }


        .galaxy-theme a {
            color: rgba(140, 210, 255, 0.9);
            position: relative;
            z-index: 2;
        }

        .galaxy-theme a:hover {
            color: rgba(200, 230, 255, 1);
            text-shadow: 0 0 8px rgba(140, 210, 255, 0.8);
        }

        .galaxy-theme a::after {
            background-color: rgba(140, 210, 255, 0.7);
            box-shadow: 0 0 8px rgba(140, 210, 255, 0.5);
        }

        .galaxy-theme .project-section-title::after {
            background-color: rgba(160, 230, 255, 0.8);
            box-shadow: 0 0 10px rgba(160, 230, 255, 0.6);
            height: 2px;
        }

        .galaxy-theme .star-3d-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            perspective: 1000px;
            z-index: -3;
            pointer-events: none;
        }

        .galaxy-theme .star-3d {
            position: absolute;
            width: 2px;
            height: 2px;
            background-color: #fff;
            border-radius: 50%;
            transform: translateZ(var(--z));
            animation: star-3d-move 20s linear infinite;
            opacity: var(--opacity, 0.8);
        }

        @keyframes star-3d-move {
            0% {
                transform: translateZ(var(--z)) translateX(0) translateY(0);
            }

            100% {
                transform: translateZ(calc(var(--z) - 500px)) translateX(var(--x)) translateY(var(--y));
                opacity: 0;
            }
        }


        .galaxy-theme .dynamic-nebula {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -3;
            opacity: 0.4;
            mix-blend-mode: screen;
        }

        .galaxy-theme .nebula-glow {
            position: absolute;
            border-radius: 50%;
            background: radial-gradient(circle at center,
                    rgba(var(--color1), 0.7) 0%,
                    rgba(var(--color2), 0.5) 30%,
                    rgba(var(--color3), 0.2) 60%,
                    transparent 100%);
            filter: blur(30px);
            opacity: var(--opacity, 0.5);
            mix-blend-mode: screen;
            animation: nebula-float var(--duration) ease-in-out infinite alternate;
            transform-origin: center;
        }

        @keyframes nebula-float {
            0% {
                transform: translate(0, 0) scale(1);
                opacity: var(--opacity);
            }

            100% {
                transform: translate(var(--x), var(--y)) scale(var(--scale));
                opacity: calc(var(--opacity) * 0.8);
            }
        }


        .galaxy-theme .section:hover::after,
        .galaxy-theme .project-section:hover::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 16px;
            pointer-events: none;
            z-index: 0;
            opacity: 0.5;
            background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
                    rgba(140, 220, 255, 0.3) 0%,
                    transparent 70%);
            transition: opacity 0.5s ease;
        }


        .galaxy-theme .section::before,
        .galaxy-theme .project-section::before,
        .galaxy-theme .resume-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 40%;
            background: linear-gradient(to bottom,
                    rgba(255, 255, 255, 0.15) 0%,
                    rgba(255, 255, 255, 0) 100%);
            border-radius: inherit;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            pointer-events: none;
            opacity: 0.7;
            z-index: 2;
            transition: opacity 0.5s ease, height 0.5s ease;
        }

        .galaxy-theme .section:hover::before,
        .galaxy-theme .project-section:hover::before,
        .galaxy-theme .resume-container:hover::before {
            opacity: 0.9;
            height: 45%;
        }


        .galaxy-theme .skill-item:hover::after,
        .galaxy-theme .experience-item:hover::after,
        .galaxy-theme .self-item:hover::after,
        .galaxy-theme .project-item:hover::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -2px;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg,
                    rgba(120, 200, 255, 0.2),
                    rgba(160, 230, 255, 0.9) 50%,
                    rgba(120, 200, 255, 0.2));
            filter: blur(1px);
            z-index: -1;
        }


        .galaxy-theme .resume-container {
            transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
        }

        .galaxy-theme .resume-container:hover {
            box-shadow:
                0 0 0 10px rgba(50, 100, 180, 0.2),
                0 25px 70px rgba(0, 60, 140, 0.45),
                0 0 150px rgba(140, 220, 255, 0.35),
                inset 0 0 70px rgba(160, 230, 255, 0.2);
        }

        .galaxy-theme .section,
        .galaxy-theme .project-section,
        .galaxy-theme .header-row {
            backdrop-filter: blur(20px) saturate(1.6);
            background-color: rgba(25, 45, 90, 0.5);
            background-image:
                linear-gradient(135deg,
                    rgba(50, 100, 180, 0.2) 0%,
                    rgba(30, 60, 120, 0.1) 100%);
            box-shadow:
                0 8px 32px rgba(0, 20, 60, 0.35),
                inset 0 0 0 1px rgba(140, 210, 255, 0.2);
            transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
        }


        .galaxy-theme .aurora-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -4;
            opacity: 0.4;
        }

        .galaxy-theme .aurora-light {
            position: absolute;
            height: 500px;
            background: linear-gradient(180deg,
                    rgba(120, 200, 255, 0) 0%,
                    rgba(120, 200, 255, 0.3) 20%,
                    rgba(140, 160, 255, 0.4) 40%,
                    rgba(160, 120, 255, 0.3) 60%,
                    rgba(180, 100, 255, 0.2) 80%,
                    rgba(200, 80, 255, 0) 100%);
            filter: blur(60px);
            animation: aurora-wave 20s ease-in-out infinite alternate;
            border-radius: 50% 50% 0 0 / 100% 100% 0 0;
            transform-origin: bottom center;
        }

        @keyframes aurora-wave {
            0% {
                transform: scaleX(1.2) translateY(20px) rotate(-5deg);
                opacity: 0.5;
                filter: blur(60px) hue-rotate(0deg);
            }

            50% {
                transform: scaleX(0.8) translateY(0px) rotate(5deg);
                opacity: 0.7;
                filter: blur(80px) hue-rotate(15deg);
            }

            100% {
                transform: scaleX(1.1) translateY(10px) rotate(-2deg);
                opacity: 0.6;
                filter: blur(70px) hue-rotate(30deg);
            }
        }


        .galaxy-theme .comet-particle {
            position: fixed;
            width: 2px;
            height: 2px;
            background-color: rgba(220, 240, 255, 0.8);
            border-radius: 50%;
            pointer-events: none;
            box-shadow: 0 0 6px rgba(180, 220, 255, 0.8);
            z-index: 1000;
            animation: comet-fade 1s ease-out forwards;
        }

        @keyframes comet-fade {
            0% {
                transform: scale(1);
                opacity: 1;
            }

            100% {
                transform: scale(0.5) translateY(10px);
                opacity: 0;
            }
        }


        .galaxy-theme .section:hover,
        .galaxy-theme .project-section:hover {
            backdrop-filter: blur(25px) saturate(1.8);
            background-color: rgba(30, 55, 100, 0.55);
            box-shadow:
                0 15px 35px rgba(0, 20, 80, 0.4),
                0 0 35px rgba(120, 200, 255, 0.25),
                inset 0 0 0 1.5px rgba(160, 230, 255, 0.3);
        }


        @keyframes galaxy-resume-intro {
            0% {
                opacity: 0;
                transform: translateY(30px) scale(0.95);
                box-shadow:
                    0 0 0 10px rgba(30, 60, 120, 0),
                    0 20px 60px rgba(0, 20, 80, 0),
                    0 0 100px rgba(80, 150, 255, 0),
                    inset 0 0 40px rgba(120, 200, 255, 0);
            }

            50% {
                opacity: 1;
                transform: translateY(0) scale(1.02);
            }

            100% {
                transform: translateY(0) scale(1);
                box-shadow:
                    0 0 0 10px rgba(30, 60, 120, 0.15),
                    0 20px 60px rgba(0, 20, 80, 0.3),
                    0 0 100px rgba(80, 150, 255, 0.25),
                    inset 0 0 40px rgba(120, 200, 255, 0.15);
            }
        }

        .galaxy-theme .comet-particle {
            position: fixed;
            width: 3px;
            height: 3px;
            background-color: rgba(220, 240, 255, 0.9);
            border-radius: 50%;
            pointer-events: none;
            box-shadow: 0 0 8px 2px rgba(180, 220, 255, 0.8);
            z-index: 1000;
            animation: comet-fade 1.5s ease-out forwards;
            will-change: transform, opacity;
        }

        .galaxy-theme .comet-particle.small {
            width: 2px;
            height: 2px;
            box-shadow: 0 0 6px 1px rgba(180, 220, 255, 0.7);
        }

        .galaxy-theme .comet-particle.tiny {
            width: 1px;
            height: 1px;
            box-shadow: 0 0 4px 1px rgba(180, 220, 255, 0.6);
        }

        @keyframes comet-fade {
            0% {
                transform: scale(1) translateY(0px);
                opacity: 1;
            }

            50% {
                opacity: 0.7;
            }

            100% {
                transform: scale(0.3) translateY(15px) translateX(var(--drift));
                opacity: 0;
            }
        }

        .galaxy-theme .orbital-system {
            position: fixed;
            width: 180px;
            height: 180px;
            z-index: -2;
            pointer-events: none;
            transform-style: preserve-3d;
            perspective: 1000px;
        }

        .galaxy-theme .orbital-ring {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 1.5px solid rgba(160, 230, 255, 0.6);
            box-shadow: 0 0 15px 2px rgba(120, 200, 255, 0.4);
            animation: orbit-rotation 60s linear infinite;
            transform-style: preserve-3d;
        }

        .galaxy-theme .orbital-planet {
            position: absolute;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            top: calc(50% - 15px);
            left: calc(50% - 15px);
            background: radial-gradient(circle at 35% 35%,
                    rgba(160, 220, 255, 1),
                    rgba(80, 140, 220, 0.9),
                    rgba(40, 80, 160, 0.8));
            box-shadow:
                0 0 20px 5px rgba(120, 200, 255, 0.6),
                0 0 40px 10px rgba(100, 180, 255, 0.3);
            animation: planet-pulse 8s ease-in-out infinite alternate;
            transform-style: preserve-3d;
        }

        .galaxy-theme .orbital-moon {
            position: absolute;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%,
                    rgba(240, 250, 255, 1),
                    rgba(200, 230, 255, 0.9),
                    rgba(180, 210, 255, 0.7));
            box-shadow: 0 0 10px 3px rgba(160, 230, 255, 0.7);
            top: 0;
            left: calc(50% - 6px);
            animation: moon-orbit 12s linear infinite;
            transform-style: preserve-3d;
            filter: blur(0.5px);
        }

        .galaxy-theme .orbital-ring-tilted {
            position: absolute;
            width: 160px;
            height: 160px;
            border-radius: 50%;
            top: 10px;
            left: 10px;
            border: 1px solid rgba(140, 210, 255, 0.5);
            box-shadow: 0 0 12px 1px rgba(120, 200, 255, 0.3);
            animation: orbit-rotation 80s linear infinite reverse;
            transform: rotateX(70deg) rotateY(10deg);
        }

        .galaxy-theme .orbital-small-moon {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: rgba(220, 240, 255, 0.95);
            box-shadow: 0 0 8px 2px rgba(160, 230, 255, 0.6);
            top: 0;
            left: calc(50% - 4px);
            animation: moon-orbit 8s linear infinite;
            transform-style: preserve-3d;
        }

        @keyframes orbit-rotation {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        @keyframes moon-orbit {
            from {
                transform: rotate(0deg) translateX(80px) rotate(0deg);
            }

            to {
                transform: rotate(360deg) translateX(80px) rotate(-360deg);
            }
        }

        @keyframes planet-pulse {
            0% {
                box-shadow:
                    0 0 20px 5px rgba(120, 200, 255, 0.6),
                    0 0 40px 10px rgba(100, 180, 255, 0.3);
                filter: brightness(1);
            }

            50% {
                filter: brightness(1.2);
            }

            100% {
                box-shadow:
                    0 0 25px 8px rgba(140, 220, 255, 0.7),
                    0 0 50px 15px rgba(120, 200, 255, 0.4);
                filter: brightness(1.1);
            }
        }


        .galaxy-theme .nebula-cloud {
            position: fixed;
            pointer-events: none;
            z-index: -3;
            filter: blur(60px);
            opacity: 0.4;
            background: radial-gradient(ellipse at center,
                    rgba(var(--cloud-color-1), 0.7) 0%,
                    rgba(var(--cloud-color-2), 0.5) 30%,
                    rgba(var(--cloud-color-3), 0.2) 70%,
                    transparent 100%);
            mix-blend-mode: screen;
            animation: nebula-float var(--float-duration) ease-in-out infinite alternate;
        }

        @keyframes nebula-float {
            0% {
                transform: translate(0, 0) scale(1);
                opacity: var(--cloud-opacity);
                filter: blur(60px) brightness(1);
            }

            50% {
                filter: blur(70px) brightness(1.1);
            }

            100% {
                transform: translate(var(--float-x), var(--float-y)) scale(var(--float-scale));
                opacity: calc(var(--cloud-opacity) * 0.8);
                filter: blur(60px) brightness(0.9);
            }
        }


        .galaxy-theme .space-dust {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -3;
            pointer-events: none;
        }

        .galaxy-theme .dust-particle {
            position: absolute;
            width: 1px;
            height: 1px;
            background-color: #fff;
            border-radius: 50%;
            opacity: var(--dust-opacity, 0.7);
            animation: dust-float var(--dust-duration, 20s) ease-in-out infinite alternate;
            transform-style: preserve-3d;
            will-change: transform;
        }

        @keyframes dust-float {
            0% {
                transform: translate3d(0, 0, 0) scale(1);
            }

            100% {
                transform: translate3d(var(--dust-x, 20px),
                        var(--dust-y, 20px),
                        var(--dust-z, 0px)) scale(0.8);
            }
        }


        .galaxy-theme .skill-item:hover,
        .galaxy-theme .experience-item:hover,
        .galaxy-theme .self-item:hover,
        .galaxy-theme .project-item:hover {
            color: rgba(220, 240, 255, 1);
            text-shadow:
                0 0 15px rgba(140, 220, 255, 0.8),
                0 0 30px rgba(100, 180, 255, 0.4);
            transform: translateX(8px) scale(1.05);
            letter-spacing: 0.5px;
        }

        .galaxy-theme .skill-item,
        .galaxy-theme .experience-item,
        .galaxy-theme .self-item,
        .galaxy-theme .project-item {
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .galaxy-theme .cosmic-sparkle {
            position: absolute;
            width: 2px;
            height: 2px;
            background-color: #fff;
            border-radius: 50%;
            pointer-events: none;
            opacity: 0;
            box-shadow: 0 0 5px 2px rgba(160, 230, 255, 0.7);
            animation: sparkle-fade 1.5s ease-out forwards;
            z-index: 2;
        }

        @keyframes sparkle-fade {
            0% {
                transform: scale(0) rotate(0deg);
                opacity: 0;
            }

            20% {
                transform: scale(1.5) rotate(180deg);
                opacity: 1;
            }

            100% {
                transform: scale(0) rotate(360deg);
                opacity: 0;
            }
        }

        .galaxy-theme .highlight-glow {
            position: fixed;
            width: 300px;
            height: 300px;
            pointer-events: none;
            border-radius: 50%;
            background: radial-gradient(circle at center,
                    rgba(140, 220, 255, 0.15) 0%,
                    rgba(100, 180, 255, 0.1) 30%,
                    rgba(70, 140, 255, 0.05) 60%,
                    transparent 100%);
            transform: translate(-50%, -50%);
            z-index: 1;
            opacity: 0;
            transition: opacity 0.3s ease;
            filter: blur(20px);
            mix-blend-mode: screen;
        }


        .galaxy-theme .skill-item:before,
        .galaxy-theme .experience-item:before,
        .galaxy-theme .self-item:before,
        .galaxy-theme .project-item:before {
            background: rgba(180, 240, 255, 0.95);
            box-shadow:
                0 0 10px 2px rgba(140, 220, 255, 0.9),
                0 0 15px 6px rgba(100, 180, 255, 0.4);
            animation: marker-pulse 3s infinite alternate;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .galaxy-theme .skill-item:hover:before,
        .galaxy-theme .experience-item:hover:before,
        .galaxy-theme .self-item:hover:before,
        .galaxy-theme .project-item:hover:before {
            transform: scale(1.8) rotate(45deg);
            background: rgba(220, 240, 255, 1);
            box-shadow:
                0 0 15px 4px rgba(160, 230, 255, 1),
                0 0 25px 10px rgba(120, 200, 255, 0.6);
        }

        @keyframes marker-pulse {
            0% {
                transform: scale(1) rotate(45deg);
                opacity: 0.8;
                box-shadow:
                    0 0 10px 2px rgba(140, 220, 255, 0.8),
                    0 0 15px 5px rgba(100, 180, 255, 0.3);
            }

            100% {
                transform: scale(1.3) rotate(45deg);
                opacity: 1;
                box-shadow:
                    0 0 15px 4px rgba(160, 230, 255, 0.9),
                    0 0 20px 8px rgba(120, 200, 255, 0.5);
            }
        }


        .galaxy-theme .parallax-stars {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            perspective: 500px;
            z-index: -3;
            pointer-events: none;
        }

        .galaxy-theme .parallax-star-layer {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            transform: translateZ(var(--depth));
            will-change: transform;
        }

        .galaxy-theme .parallax-star {
            position: absolute;
            width: var(--size);
            height: var(--size);
            background-color: #fff;
            border-radius: 50%;
            box-shadow: 0 0 var(--glow-size) var(--glow-color);
            opacity: var(--opacity);
            animation: parallax-twinkle var(--duration) ease-in-out infinite alternate;
        }

        @keyframes parallax-twinkle {
            0% {
                opacity: var(--min-opacity);
                transform: scale(0.8);
            }

            100% {
                opacity: var(--max-opacity);
                transform: scale(1.2);
            }
        }

        .galaxy-theme .resume-container {
            transform-style: preserve-3d;
            transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
            transition: transform 0.5s ease-out;
        }


        .galaxy-theme .cosmic-dust {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -2;
            pointer-events: none;
            perspective: 500px;
        }

        .galaxy-theme .dust-particle {
            position: absolute;
            width: 1px;
            height: 1px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            box-shadow: 0 0 2px rgba(180, 220, 255, 0.6);
            animation: dust-float var(--float-duration) ease-in-out infinite alternate;
            opacity: var(--opacity);
            transform: translateZ(var(--depth));
        }

        @keyframes dust-float {
            0% {
                transform: translateZ(var(--depth)) translate(0, 0);
                opacity: var(--opacity);
            }

            100% {
                transform: translateZ(var(--depth)) translate(var(--translate-x), var(--translate-y));
                opacity: calc(var(--opacity) * 0.7);
            }
        }

        .galaxy-theme .aurora {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -4;
            opacity: 0.3;
            mix-blend-mode: screen;
        }

        .galaxy-theme .aurora-beam {
            position: absolute;
            width: 100%;
            height: 200px;
            background: linear-gradient(180deg,
                    rgba(120, 200, 255, 0) 0%,
                    rgba(120, 200, 255, 0.2) 20%,
                    rgba(140, 160, 255, 0.3) 40%,
                    rgba(160, 120, 255, 0.2) 60%,
                    rgba(180, 100, 255, 0.1) 80%,
                    rgba(200, 80, 255, 0) 100%);
            filter: blur(40px);
            transform-origin: bottom;
            animation: aurora-wave 15s ease-in-out infinite alternate;
        }

        @keyframes aurora-wave {
            0% {
                transform: translateY(30%) scaleX(1.5) rotate(-3deg);
                opacity: 0.3;
                filter: blur(40px) hue-rotate(0deg);
            }

            100% {
                transform: translateY(20%) scaleX(1.2) rotate(3deg);
                opacity: 0.5;
                filter: blur(60px) hue-rotate(30deg);
            }
        }

        .galaxy-theme .mouse-particle {
            position: fixed;
            pointer-events: none;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.8);
            box-shadow: 0 0 6px rgba(140, 220, 255, 0.8);
            z-index: 9999;
            animation: particle-fade 1.5s ease-out forwards;
        }

        @keyframes particle-fade {
            0% {
                transform: scale(1);
                opacity: 0.8;
            }

            100% {
                transform: scale(0.2) translateY(20px);
                opacity: 0;
            }
        }

        .galaxy-theme .theme-notifier {
            background: rgba(20, 40, 80, 0.8);
            color: rgba(200, 230, 255, 1);
            text-shadow: 0 0 10px rgba(140, 220, 255, 0.7);
            box-shadow:
                0 0 20px rgba(100, 180, 255, 0.4),
                0 0 40px rgba(100, 180, 255, 0.2);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(140, 220, 255, 0.4);
        }

        .custom-cursor {
            position: fixed;
            /* 从absolute改为fixed */
            width: 32px;
            height: 32px;
            pointer-events: none;
            z-index: 2147483647;
            transform: translate(-50%, -50%) translateZ(0);
            /* 添加translateZ(0)启用硬件加速 */
            transition: transform 0.01s linear;
            transform-origin: center;
            will-change: transform, left, top;
            /* 明确指定will-change属性 */
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        .cursor-core {
            position: absolute;
            width: 9px;
            /* 使用更小的奇数像素尺寸 */
            height: 9px;
            /* 使用更小的奇数像素尺寸 */
            background: linear-gradient(90deg, var(--primary-color, #00f7ff), var(--secondary-color, #0066cc));
            border-radius: 50%;
            box-shadow: 0 0 15px var(--primary-color, #00f7ff);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) translateZ(0);
            /* 添加translateZ(0)启用硬件加速 */
            animation: pulse 1.5s infinite alternate;
            transform-style: preserve-3d;
            will-change: transform;
            transform-origin: center;
            z-index: 2;
            pointer-events: none;
            margin: 0;
            padding: 0;
        }

        .cursor-trail {
            position: fixed !important;
            /* 使用fixed定位 */
            pointer-events: none;
            z-index: 2147483646;
            width: 8px;
            height: 8px;
            background: rgba(0, 247, 255, 0.6);
            border-radius: 50%;
            transition: opacity 0.3s ease;
        }

        .cursor-ring {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            box-shadow:
                0 0 15px rgba(0, 247, 255, 0.8),
                0 0 30px rgba(0, 170, 255, 0.6),
                inset 0 0 10px rgba(0, 102, 204, 0.8);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) translateZ(0);
            animation:
                rotate 3s linear infinite,
                ringGlow 3s ease-in-out infinite alternate;
            box-sizing: border-box;
            z-index: 9999999;
            will-change: transform, opacity, box-shadow;
            backface-visibility: hidden;
        }

        .cursor-ring::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 50%;
            padding: 3px;
            background: linear-gradient(135deg, #00f7ff 0%, #00aaff 40%, #0066cc 100%);
            -webkit-mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
            mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }

        @keyframes pulse {
            0% {
                transform: translate(-50%, -50%) scale(0.9) translateZ(0);
                opacity: 0.8;
            }

            100% {
                transform: translate(-50%, -50%) scale(1.1) translateZ(0);
                opacity: 1;
            }
        }

        @keyframes rotate {
            0% {
                transform: translate(-50%, -50%) rotate(0deg) translateZ(0);
            }

            100% {
                transform: translate(-50%, -50%) rotate(360deg) translateZ(0);
            }
        }

        @keyframes ringGlow {
            0% {
                filter: hue-rotate(-10deg) brightness(1);
                opacity: 0.9;
                box-shadow:
                    0 0 10px rgba(0, 247, 255, 0.8),
                    0 0 20px rgba(0, 170, 255, 0.6),
                    inset 0 0 8px rgba(0, 102, 204, 0.8);
            }

            100% {
                filter: hue-rotate(20deg) brightness(1.6);
                opacity: 1;
                box-shadow:
                    0 0 25px rgba(0, 247, 255, 1),
                    0 0 40px rgba(0, 170, 255, 0.8),
                    inset 0 0 15px rgba(0, 102, 204, 1);
            }
        }

        /* 动态气泡装饰 */
        #bubbles-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }
        
        .decorative-bubble {
            position: absolute;
            background: radial-gradient(circle at 30% 30%, rgba(101, 219, 255, 0.6), rgba(0, 118, 196, 0.2));
            border-radius: 50%;
            box-shadow: 0 0 8px rgba(101, 219, 255, 0.4), 0 0 20px rgba(0, 118, 196, 0.2) inset;
            animation: floatBubble 15s ease-in-out infinite alternate, glowBubble 6s ease-in-out infinite alternate;
            filter: blur(1px);
        }

        /* 核心算法-思维导图 炫酷样式 */
        .algorithm-mindmap-link {
            text-decoration: none;
            display: block;
            margin: 30px 0;
            position: relative;
        }

        .algorithm-mindmap-title {
            background: linear-gradient(135deg, rgba(1, 65, 130, 0.7), rgba(6, 128, 200, 0.7));
            border: 2px solid rgba(77, 220, 255, 0.5);
            border-radius: 15px;
            padding: 18px 25px;
            color: #ffffff;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 10px 30px rgba(0, 118, 196, 0.3), 0 0 20px rgba(77, 220, 255, 0.2);
            transform-style: preserve-3d;
            z-index: 5;
        }

        .algorithm-mindmap-title::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, 
                rgba(77, 220, 255, 0.2) 0%, 
                rgba(77, 220, 255, 0) 40%, 
                rgba(77, 220, 255, 0.2) 60%, 
                rgba(77, 220, 255, 0) 100%);
            z-index: 1;
            transform: translateZ(-1px);
            opacity: 0;
            transition: opacity 0.4s ease, transform 1s ease;
        }

        .algorithm-mindmap-link:hover .algorithm-mindmap-title {
            transform: translateY(-5px) translateZ(0);
            background: linear-gradient(135deg, rgba(1, 85, 160, 0.8), rgba(6, 158, 230, 0.8));
            box-shadow: 0 15px 35px rgba(0, 118, 196, 0.4), 0 0 30px rgba(77, 220, 255, 0.3);
            border-color: rgba(77, 220, 255, 0.8);
        }

        .algorithm-mindmap-link:hover .algorithm-mindmap-title::before {
            animation: shine 1.5s infinite alternate;
            opacity: 1;
        }

        @keyframes shine {
            0% {
                transform: translateX(-100%) rotate(45deg);
            }
            100% {
                transform: translateX(100%) rotate(45deg);
            }
        }

        .algorithm-pulse-ring {
            position: absolute;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(77, 220, 255, 0.2);
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 3;
        }

        .algorithm-pulse-ring::before,
        .algorithm-pulse-ring::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: rgba(77, 220, 255, 0.4);
            z-index: -1;
            animation: pulse 2s infinite;
        }

        .algorithm-pulse-ring::after {
            animation-delay: 0.5s;
        }

        @keyframes pulse {
            0% {
                transform: scale(0.8);
                opacity: 0.8;
            }
            70% {
                transform: scale(2);
                opacity: 0;
            }
            100% {
                transform: scale(2.2);
                opacity: 0;
            }
        }

        .algorithm-text {
            font-size: 1.3em;
            font-weight: bold;
            color: #ffffff;
            margin-left: 50px;
            position: relative;
            z-index: 4;
            text-shadow: 0 0 15px rgba(77, 220, 255, 0.8), 0 0 30px rgba(77, 220, 255, 0.6);
            transition: all 0.4s ease;
        }

        .algorithm-mindmap-link:hover .algorithm-text {
            text-shadow: 0 0 20px rgba(77, 220, 255, 1), 0 0 40px rgba(77, 220, 255, 0.8);
            transform: scale(1.05);
        }

        .algorithm-icon {
            width: 30px;
            height: 30px;
            background: rgba(77, 220, 255, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 4;
            transition: all 0.4s ease;
        }

        .algorithm-arrow {
            display: block;
            width: 10px;
            height: 10px;
            border-top: 2px solid rgba(255, 255, 255, 0.9);
            border-right: 2px solid rgba(255, 255, 255, 0.9);
            transform: rotate(45deg);
            transition: all 0.3s ease;
        }

        .algorithm-mindmap-link:hover .algorithm-icon {
            background: rgba(77, 220, 255, 0.4);
            transform: translateX(5px);
        }

        .algorithm-mindmap-link:hover .algorithm-arrow {
            transform: rotate(45deg) scale(1.2);
        }

        .galaxy-theme .algorithm-mindmap-title {
            background: linear-gradient(135deg, rgba(20, 40, 80, 0.7), rgba(30, 60, 120, 0.7));
            border: 2px solid rgba(100, 180, 255, 0.5);
            box-shadow: 0 10px 30px rgba(0, 30, 80, 0.4), 0 0 20px rgba(100, 180, 255, 0.3);
        }

        .galaxy-theme .algorithm-mindmap-link:hover .algorithm-mindmap-title {
            background: linear-gradient(135deg, rgba(25, 50, 100, 0.8), rgba(40, 80, 160, 0.8));
            border-color: rgba(140, 210, 255, 0.8);
            box-shadow: 0 15px 35px rgba(0, 40, 100, 0.5), 0 0 30px rgba(140, 210, 255, 0.4);
        }

        .rainbow-theme .algorithm-mindmap-title {
            background: linear-gradient(90deg,
                rgba(255, 100, 100, 0.7) 0%,
                rgba(255, 200, 100, 0.7) 20%,
                rgba(100, 255, 100, 0.7) 40%,
                rgba(100, 200, 255, 0.7) 60%,
                rgba(180, 120, 255, 0.7) 80%,
                rgba(255, 100, 200, 0.7) 100%);
            background-size: 200% 100%;
            animation: rainbow-shift 8s linear infinite;
            border: 2px solid transparent;
            border-image: linear-gradient(45deg,
                rgba(255, 0, 0, 0.7) 0%,
                rgba(255, 165, 0, 0.7) 12.5%,
                rgba(255, 255, 0, 0.7) 25%,
                rgba(0, 255, 0, 0.7) 37.5%,
                rgba(0, 0, 255, 0.7) 50%,
                rgba(75, 0, 130, 0.7) 62.5%,
                rgba(238, 130, 238, 0.7) 75%,
                rgba(255, 0, 127, 0.7) 87.5%,
                rgba(255, 0, 0, 0.7) 100%) 1;
        }

        .rainbow-theme .algorithm-mindmap-link:hover .algorithm-mindmap-title {
            filter: brightness(1.2);
            box-shadow: 0 15px 35px rgba(150, 100, 255, 0.35), 0 0 30px rgba(255, 150, 150, 0.3);
            animation: rainbow-shift 4s linear infinite;
        }

        .rainbow-theme .algorithm-text {
            background: linear-gradient(90deg,
                #ff0000, #ff7f00, #ffff00, #00ff00,
                #0000ff, #4b0082, #8b00ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            background-size: 200% auto;
            animation: rainbow-text 6s linear infinite;
        }
        
        @keyframes floatBubble {
            0%, 100% {
                transform: translate(0, 0) scale(1);
            }
            25% {
                transform: translate(15px, -15px) scale(1.05);
            }
            50% {
                transform: translate(-10px, 20px) scale(1.1);
            }
            75% {
                transform: translate(-20px, 5px) scale(0.95);
            }
        }
    </style>

    <style>
        .custom-cursor,
        .cursor-core,
        .cursor-ring {
            box-sizing: border-box;
            transform-origin: center center;
        }

        * {
            cursor: none !important;
        }

        /* 删除这里重复的定义 */
        /* 
        .custom-cursor {
            position: absolute;
            width: 32px;
            height: 32px;
            pointer-events: none;
            z-index: 2147483647;
            transform: translate(-50%, -50%) translateZ(0);
            transition: transform 0.01s linear;
            transform-origin: center;
            will-change: transform;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        .cursor-core {
            position: absolute;
            width: 12px;
            height: 12px;
            background: linear-gradient(90deg, var(--primary-color, #00f7ff), var(--secondary-color, #0066cc));
            border-radius: 50%;
            box-shadow: 0 0 15px var(--primary-color, #00f7ff);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) translateZ(0);
            animation: pulse 1.5s infinite alternate;
            transform-style: preserve-3d;
            will-change: transform;
            transform-origin: center;
            z-index: 2;
        }
        */
    </style>



    <script>

        function createRainbowParticles(x, y) {
            if (document.querySelectorAll('.rainbow-particle').length > 50) return;


            const particleCount = 2 + Math.floor(Math.random() * 2);

            for (let i = 0; i < particleCount; i++) {
                if (Math.random() > 0.3) {
                    const particle = document.createElement('div');
                    particle.className = 'rainbow-particle';
                    document.body.appendChild(particle);

                    const size = 1.5 + Math.random() * 4.5;
                    particle.style.width = size + 'px';
                    particle.style.height = size + 'px';

                    const offsetX = (Math.random() - 0.5) * 30;
                    const offsetY = (Math.random() - 0.5) * 30;
                    particle.style.left = (x + offsetX) + 'px';
                    particle.style.top = (y + offsetY) + 'px';

                    const opacity = 0.4 + Math.random() * 0.5;
                    particle.style.setProperty('--opacity', opacity);


                    const distance = 40 + Math.random() * 100;
                    particle.style.setProperty('--distance', distance);

                    const rotation = Math.random() * 360 + 'deg';
                    particle.style.setProperty('--rotation', rotation);

                    const duration = 1 + Math.random() * 3 + 's';
                    particle.style.setProperty('--float-duration', duration);

                    setTimeout(() => {
                        if (particle.parentNode) {
                            particle.parentNode.removeChild(particle);
                        }
                    }, 4000);
                }
            }
        }
        function createRainbowEffects() {

            const rainbowParticlesContainer = document.createElement('div');
            rainbowParticlesContainer.className = 'rainbow-particles';
            document.body.appendChild(rainbowParticlesContainer);

            for (let i = 0; i < 60; i++) {
                const particle = document.createElement('div');
                particle.className = 'rainbow-particle';


                const left = Math.random() * 100;
                const top = Math.random() * 100;
                particle.style.left = left + 'vw';
                particle.style.top = top + 'vh';


                const size = 1.5 + Math.random() * 5.5;
                particle.style.width = size + 'px';
                particle.style.height = size + 'px';


                const opacity = 0.3 + Math.random() * 0.7;
                particle.style.setProperty('--opacity', opacity);


                const duration = 4 + Math.random() * 18 + 's';
                particle.style.setProperty('--float-duration', duration);

                const distance = 40 + Math.random() * 120;
                particle.style.setProperty('--distance', distance);


                const rotation = Math.random() * 360 + 'deg';
                particle.style.setProperty('--rotation', rotation);

                rainbowParticlesContainer.appendChild(particle);
            }


            const styleSheet = document.createElement('style');
            styleSheet.innerHTML = `
                @keyframes beam-sweep {
                    0% { transform: translateX(-100%) rotate(var(--angle, 30deg)); opacity: 0; }
                    5% { opacity: 1; }
                    50% { opacity: 0.8; }
                    95% { opacity: 1; }
                    100% { transform: translateX(100%) rotate(var(--angle, 30deg)); opacity: 0; }
                }
            `;
            document.head.appendChild(styleSheet);

            const rainbowBeam = document.createElement('div');
            rainbowBeam.className = 'rainbow-beam';
            rainbowBeam.style.position = 'fixed';
            rainbowBeam.style.width = '100%';
            rainbowBeam.style.height = '100%';
            rainbowBeam.style.top = '0';
            rainbowBeam.style.left = '0';
            rainbowBeam.style.pointerEvents = 'none';
            rainbowBeam.style.zIndex = '-1';
            document.body.appendChild(rainbowBeam);


            for (let i = 0; i < 3; i++) {
                const beam = document.createElement('div');
                beam.style.position = 'absolute';
                beam.style.width = '200%';
                beam.style.height = '5px';
                beam.style.background = `linear-gradient(90deg, 
                    rgba(255, 0, 0, 0.05), 
                    rgba(255, 165, 0, 0.05), 
                    rgba(255, 255, 0, 0.05), 
                    rgba(0, 255, 0, 0.05), 
                    rgba(0, 0, 255, 0.05), 
                    rgba(75, 0, 130, 0.05), 
                    rgba(238, 130, 238, 0.05))`;
                beam.style.borderRadius = '3px';
                beam.style.filter = 'blur(3px)';

                const top = Math.random() * 100;
                const angle = -30 + Math.random() * 60;
                beam.style.top = `${top}%`;
                beam.style.left = '-50%';
                beam.style.setProperty('--angle', `${angle}deg`);
                beam.style.transform = `rotate(${angle}deg)`;


                beam.style.animation = `beam-sweep ${15 + Math.random() * 10}s linear infinite`;
                beam.style.animationDelay = `${Math.random() * 5}s`;

                rainbowBeam.appendChild(beam);
            }
        }

    </script>

</head>

<body>
    <!-- 自定义鼠标指针 -->
    <div class="custom-cursor" id="custom-cursor">
        <div class="cursor-core"></div>
        <div class="cursor-ring"></div>
    </div>

    <div class="resume-container">
        <div class="header-row">
            <div class="header-left">
                <div class="basic-info-col">
                    <p>姓名：梁奕琦</p>
                    <p>学号: 2400320321</p>
                    <p>学院：计算机与信息安全学院</p>
                    <p>专业：软件工程</p>
                </div>
                <div class="basic-info-col">
                    <p>政治面貌：共青团员</p>
                    <p>出生日期: 2006.01.11</p>
                    <p>联系电话: 18276659189</p>
                    <p>电子邮箱: 1459576494@qq.com</p>
                </div>
            </div>
            <div class="header-right">
                <div class="profile-pic-container">
                    <img src="LYQ.jpg" alt="2400320321" class="profile-pic" id="themeToggle">
                </div>
            </div>
        </div>
        <div class="main-content">
            <div class="left-column">
                <div class="section">
                    <h1>技能特长</h1>
                    <div class="section-content">
                        <div class="skill-item">熟练掌握 <strong>HTML、CSS、JavaScript</strong></div>
                        <div class="skill-item">熟悉运用 <strong>Canvas</strong> 绘制2D图形和动画</div>
                        <div class="skill-item">熟悉运用 <strong>Three.js</strong> 绘制3D场景</div>
                        <div class="skill-item">了解使用 <strong>WebGL/OpenGL</strong> 绘制3D场景</div>
                        <div class="skill-item">了解 <strong>计算机图形学</strong></div>
                        <div class="skill-item">熟悉掌握<strong> 空间坐标系 </strong>进行<strong> 数学/物理 建模</strong></div>
                        <div class="skill-item">熟练掌握<strong> linear/radial-gradient </strong>创造色彩渐变式UI</div>
                        <div class="skill-item">熟练运用<strong> Figma </strong>设计UI，再结合AI快速开发html页面</div>
                        <div class="skill-item">熟练掌握<strong> 动态壁纸制作</strong>，并适配 <strong>Wallpaper Engine</strong> 平台</div>
                        <div class="skill-item">熟悉<strong> Java、Python、C语言 </strong></div>
                        <div class="skill-item">熟悉掌握<strong> 响应式编程 </strong></div>
                        <div class="skill-item">熟练掌握<strong> 思维导图制作 </strong></div>
                        <div class="skill-item">了解微信<strong> 小程序 </strong>开发</div>
                        <div class="skill-item">熟悉<strong> 视频剪辑</strong></div>

                    </div>
                </div>
                <div class="section">
                    <h1>在校经历</h1>
                    <div class="section-content">
                        <div class="experience-item">获英语<strong>四级</strong>证书</div>
                        <div class="experience-item">获<strong>军训</strong>优秀先进个人奖</div>
                        <div class="experience-item">获本校举办的<strong>计算机</strong>知识竞赛二等奖</div>
                        <div class="experience-item">获本校举办的<strong>党史</strong>知识竞赛二等奖</div>
                        <div class="experience-item">参加<strong>电赛</strong>，辅助团队编程，开发智能寻迹小车</div>
                        <div class="experience-item">大一担任软工三班<strong>科技委员</strong></div>
                        <div class="experience-item">体测<strong>1000米3分06秒</strong></div>
                        <div class="experience-item">在思源湖独自跑过<strong>马拉松</strong></div>
                        <div class="skill-item">写过<strong>书法</strong>作品，创作原创<strong>音乐</strong></div>
                    </div>
                </div>

                <div class="section">
                    <h1>项目操作·设计思路</h1>
                    <div class="section-content">
                        <br>
                        <div class="experience-nav">
                            <div id="theme1-trigger" class="nav-item" onclick="toggleContent('theme1')"><strong>一、主页：流浪地球·三体</strong></div>
                            <div id="theme1" class="experience-content" style="display: none;">
                                <div class="experience-item">1.单击左键：<br>
                                    &nbsp;&nbsp;小宇宙图标爆炸，并且释放一些小星球<br>
                                    2.单击中键：<br>
                                    &nbsp;&nbsp;星光射线乍现，恰似<br>
                                    &nbsp;&nbsp;"利剑开刃寒光锋芒的银星 绝不消隐···决意前进"<br>
                                    3.单击右键：<br>
                                    &nbsp;&nbsp;曲率引擎聚能粒子喷射 + 球状闪电</div>
                                <div class="experience-item">4.点击MOSS计算：<br>
                                    曲率引擎聚能粒子喷射 +
                                    <br>&nbsp;&nbsp;球状闪电 + 巨型流星<br>

                                    &nbsp;&nbsp;PS. MOSS计算的科幻系数因子分别是：<br>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3.14(圆周率pai)<br>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.71(自然常数e)<br>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6.67(万有引力常数G)<br>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6.62(普朗克常数h)<br>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0, 0 (自我在宇宙中不过一粒尘埃)
                                </div>
                                <div class="experience-item">5.点击最下方文字：<br>
                                    &nbsp;&nbsp;划过文字对应图片</div>
                                <div class="experience-item">6.点击最下方"READMD-Limitless"：<br>
                                    &nbsp;&nbsp;&nbsp;可见本操作说明的 html 页面，<br>
                                    &nbsp;&nbsp;&nbsp;再点击右键或者"Limitless"：<br>
                                    &nbsp;&nbsp;&nbsp;出现关于作者的自制个人简历。<br>
                                    &nbsp;&nbsp;&nbsp;底部footer文字背景："妈妈，我将变成萤火虫"。
                                </div>
                            </div>

                            <div id="theme2-trigger" class="nav-item" onclick="toggleContent('theme2')"><strong>二、水滴：黑暗森林·星际穿越</strong></div>
                            <div id="theme2" class="experience-content" style="display: none;">
                                <div class="experience-item">1.双击左键 / 点击太阳 / 点击冰星 ：<br>
                                    &nbsp;&nbsp;"凌晨一至五点，整个宇宙将为你闪烁。"<br>
                                    &nbsp;&nbsp;冰与火相对: <br>
                                    &nbsp;&nbsp;三体世界生活在水深火热的横乱纪元中</div>
                                <div class="experience-item">2.单击中键：<br>
                                    &nbsp;&nbsp;产生20条宇宙广播：<br>
                                    2.1--100.001100110011：4.2...(十进制)：<br>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;地球与三体的距离约为4.2光年<br>
                                    2.2--01001110 01001111 (二进制) ：<br>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;78 79 (十进制) ：N O (ASCII) - 不要回答<br>
                                    2.3--20 : 1+3+7+9 = 20 ：<br>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;叶文洁与1379号监听员发送宇宙广播
                                </div>
                                <div class="experience-item">3.双击右键：模拟星际穿越发射的引力波</div>
                                <div class="experience-item">4.长按右键不松：转换背景星辰视角</div>
                                <div class="experience-item">5.长按左键不松：转换观测者视角</div>
                                <div class="experience-item">6.滑动鼠标滚轮：控制流星速度</div>
                                <div class="experience-item">7.点击水滴：宇宙广播加强版 (点击鼠标右键可返回)</div>
                            </div>

                            <div id="theme3-trigger" class="nav-item" onclick="toggleContent('theme3')"><strong>三、银河：黑暗森林·降维打击</strong></div>
                            <div id="theme3" class="experience-content" style="display: none;">
                                <div class="experience-item">1.双击左键：宇宙广播</div>
                                <div class="experience-item">2.双击右键：银河初生</div>
                                <div class="experience-item">3.长按右键：星际射线+降维打击</div>
                                <div class="experience-item">"宇宙就是一座黑暗森林，每个文明都是带枪的猎人<br>
                                                              像幽灵般潜行于林间······<br>
                                                              能做的只有一件事：开枪消灭之"</div>
                            </div>

                            <div id="theme4-trigger" class="nav-item" onclick="toggleContent('theme4')"><strong>四、月亮：奇思宇宙</strong></div>
                            <div id="theme4" class="experience-content" style="display: none;">
                                <div class="experience-item">1.单击中键：七彩彗星流光追鼠标</div>
                                <div class="experience-item">2.点击"@星梦游 | 奇思宇宙"：<br>
                                    &nbsp;&nbsp;脑中的思想宇宙-大爆炸直至坍缩</div>
                            </div>

                            <div id="theme5-trigger" class="nav-item" onclick="toggleContent('theme5')"><strong>五、太阳：梦幻星海</strong></div>
                            <div id="theme5" class="experience-content" style="display: none;">
                                <div class="experience-item">1.单击左键：下一张壁纸</div>
                                <div class="experience-item">2.单击中键；彩虹 + 七彩粒子爆发</div>
                                <div class="experience-item">3.单击右键：流星雨</div>
                                <div class="experience-item">4.长按右键：烟花</div>
                            </div>
                        </div>
                        <script>
                            function toggleContent(themeId) {
                                // 获取所有内容元素
                                var contents = document.getElementsByClassName('experience-content');
                                // 先隐藏所有内容
                                for (var i = 0; i < contents.length; i++) {
                                    contents[i].style.display = 'none';
                                }
                                // 显示被点击的内容
                                var targetContent = document.getElementById(themeId);
                                if (targetContent.style.display === 'none') {
                                    targetContent.style.display = 'block';
                                } else {
                                    targetContent.style.display = 'none';
                                }
                            }
                        </script>

                        <style>
                            .experience-nav {
                                margin-bottom: 20px;
                            }
                            
                            /* 基础导航项样式 */
                            .nav-item {
                                padding: 10px 15px;
                                margin: 5px 0;
                                border-radius: 5px;
                                cursor: pointer;
                                transition: all 0.3s;
                                font-weight: bold;
                                text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
                                position: relative;
                                z-index: 10;
                                overflow: visible;
                            }
                            
                            /* 为所有主题导航项文字添加更清晰的文字效果 */
                            .nav-item strong {
                                position: relative;
                                z-index: 11;
                                letter-spacing: 1px;
                                text-shadow: 
                                    0 0 2px #000, 
                                    0 0 3px #000, 
                                    0 0 5px rgba(255, 255, 255, 0.9), 
                                    0 0 8px rgba(255, 255, 255, 0.7);
                                display: block;
                                font-weight: 800;
                            }
                            
                            /* 一、主页：流浪地球·三体 - 星空太空主题 */
                            #theme1-trigger {
                                background: linear-gradient(to right, #000428, #004e92);
                                border: 1px solid #0066cc;
                                box-shadow: 0 0 10px rgba(0, 102, 204, 0.7);
                            }
                            #theme1-trigger strong {
                                color: #ffffff;
                                text-shadow: 
                                    0 0 2px #000, 
                                    0 0 3px #000, 
                                    0 0 5px #0066cc, 
                                    0 0 8px #0066cc;
                            }
                            #theme1-trigger:hover {
                                background: linear-gradient(to right, #001e4e, #0063b8);
                                box-shadow: 0 0 15px rgba(0, 102, 204, 0.9);
                            }
                            #theme1-trigger:hover strong {
                                color: #ffffff;
                                text-shadow: 
                                    0 0 2px #000, 
                                    0 0 4px #000, 
                                    0 0 6px #0088ff, 
                                    0 0 10px #0088ff;
                            }
                            #theme1 {
                                background: rgba(0, 30, 60, 0.6);
                                border-color: #0066cc;
                                box-shadow: 0 0 8px rgba(0, 102, 204, 0.5);
                            }
                            
                            /* 二、水滴：黑暗森林·星际穿越 - 深邃黑暗主题 */
                            #theme2-trigger {
                                background: linear-gradient(to right, #000000, #2c3e50);
                                border: 1px solid #34495e;
                                box-shadow: 0 0 10px rgba(52, 73, 94, 0.7);
                            }
                            #theme2-trigger strong {
                                color: #ffffff;
                                text-shadow: 
                                    0 0 2px #000, 
                                    0 0 3px #000, 
                                    0 0 5px #34495e, 
                                    0 0 8px #34495e;
                            }
                            #theme2-trigger:hover {
                                background: linear-gradient(to right, #1a1a1a, #34495e);
                                box-shadow: 0 0 15px rgba(52, 73, 94, 0.9);
                            }
                            #theme2-trigger:hover strong {
                                color: #ffffff;
                                text-shadow: 
                                    0 0 2px #000, 
                                    0 0 4px #000, 
                                    0 0 6px #5d7ea6, 
                                    0 0 10px #5d7ea6;
                            }
                            #theme2 {
                                background: rgba(26, 32, 44, 0.7);
                                border-color: #34495e;
                                box-shadow: 0 0 8px rgba(52, 73, 94, 0.5);
                            }
                            
                            /* 三、银河：黑暗森林·降维打击 - 银河紫蓝主题 */
                            #theme3-trigger {
                                background: linear-gradient(to right, #0f0c29, #302b63, #24243e);
                                border: 1px solid #7b68ee;
                                box-shadow: 0 0 10px rgba(123, 104, 238, 0.7);
                            }
                            #theme3-trigger strong {
                                color: #ffffff;
                                text-shadow: 
                                    0 0 2px #000, 
                                    0 0 3px #000, 
                                    0 0 5px #7b68ee, 
                                    0 0 8px #7b68ee;
                            }
                            #theme3-trigger:hover {
                                background: linear-gradient(to right, #24243e, #483d8b, #4b0082);
                                box-shadow: 0 0 15px rgba(123, 104, 238, 0.9);
                            }
                            #theme3-trigger:hover strong {
                                color: #ffffff;
                                text-shadow: 
                                    0 0 2px #000, 
                                    0 0 4px #000, 
                                    0 0 6px #9f8fff, 
                                    0 0 10px #9f8fff;
                            }
                            #theme3 {
                                background: rgba(47, 43, 95, 0.6);
                                border-color: #7b68ee;
                                box-shadow: 0 0 8px rgba(123, 104, 238, 0.5);
                            }
                            
                            /* 四、月亮：奇思宇宙 - 月光银白主题 */
                            #theme4-trigger {
                                background: linear-gradient(to right, #141e30, #243b55);
                                border: 1px solid #b2b9c5;
                                box-shadow: 0 0 10px rgba(178, 185, 197, 0.7);
                            }
                            #theme4-trigger strong {
                                color: #ffffff;
                                text-shadow: 
                                    0 0 2px #000, 
                                    0 0 3px #000, 
                                    0 0 5px #b2b9c5, 
                                    0 0 8px #b2b9c5;
                            }
                            #theme4-trigger:hover {
                                background: linear-gradient(to right, #243b55, #485563);
                                box-shadow: 0 0 15px rgba(178, 185, 197, 0.9);
                            }
                            #theme4-trigger:hover strong {
                                color: #ffffff;
                                text-shadow: 
                                    0 0 2px #000, 
                                    0 0 4px #000, 
                                    0 0 6px #d6dde9, 
                                    0 0 10px #d6dde9;
                            }
                            #theme4 {
                                background: rgba(36, 59, 85, 0.6);
                                border-color: #b2b9c5;
                                box-shadow: 0 0 8px rgba(178, 185, 197, 0.5);
                            }
                            
                            /* 五、太阳：梦幻星海 - 太阳橙黄彩虹主题 */
                            #theme5-trigger {
                                background: linear-gradient(to right, #f12711, #f5af19);
                                border: 1px solid #ffcc00;
                                box-shadow: 0 0 10px rgba(255, 204, 0, 0.7);
                                color: #000;
                            }
                            #theme5-trigger strong {
                                color: #000000;
                                text-shadow: 
                                    0 0 2px #fff, 
                                    0 0 3px #fff, 
                                    0 0 5px #ffcc00, 
                                    0 0 8px #ffcc00;
                            }
                            #theme5-trigger:hover {
                                background: linear-gradient(to right, #ff512f, #f09819);
                                box-shadow: 0 0 15px rgba(255, 204, 0, 0.9);
                            }
                            #theme5-trigger:hover strong {
                                color: #000000;
                                text-shadow: 
                                    0 0 2px #fff, 
                                    0 0 4px #fff, 
                                    0 0 6px #ffdb4d, 
                                    0 0 10px #ffdb4d;
                            }
                            #theme5 {
                                background: rgba(245, 175, 25, 0.4);
                                border-color: #ffcc00;
                                box-shadow: 0 0 8px rgba(255, 204, 0, 0.5);
                            }
                            
                            /* 所有主题内容中的文字样式 */
                            .experience-content .experience-item {
                                margin-bottom: 10px;
                                line-height: 1.5;
                                text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
                                color: #ffffff;
                                font-weight: 500;
                                position: relative;
                                z-index: 6;
                            }
                            
                            /* 增强内容区域文字清晰度 */
                            .experience-content {
                                position: relative;
                                z-index: 5;
                                margin-left: 20px;
                                margin-bottom: 20px;
                                padding: 10px;
                                border-radius: 5px;
                                border-left: 3px solid;
                            }
                            
                            #theme1 .experience-item {
                                color: #e0f0ff;
                                text-shadow: 0 0 4px rgba(0, 0, 0, 0.8), 0 0 6px rgba(0, 102, 204, 0.5);
                            }
                            
                            #theme2 .experience-item {
                                color: #e8f0ff;
                                text-shadow: 0 0 4px rgba(0, 0, 0, 0.8), 0 0 6px rgba(52, 73, 94, 0.5);
                            }
                            
                            #theme3 .experience-item {
                                color: #f0e8ff;
                                text-shadow: 0 0 4px rgba(0, 0, 0, 0.8), 0 0 6px rgba(123, 104, 238, 0.5);
                            }
                            
                            #theme4 .experience-item {
                                color: #e8f0ff;
                                text-shadow: 0 0 4px rgba(0, 0, 0, 0.8), 0 0 6px rgba(178, 185, 197, 0.5);
                            }
                            
                            #theme5 .experience-item {
                                color: #000000;
                                text-shadow: 0 0 4px rgba(255, 255, 255, 0.8), 0 0 6px rgba(255, 204, 0, 0.5);
                                font-weight: 600;
                            }
                        </style>
                    </div>
                </div>
                <div class="section">
                    <h1>自我评价</h1>
                    <div class="section-content">
                        <div class="self-item">高度<strong>自律</strong>，持之以恒，锲而不舍，做事<strong>拼命</strong></div>
                        <div class="self-item">听歌<strong>跑步</strong>，随歌而奔，随风而跑，追逐<strong>自由</strong></div>
                        <div class="self-item">电影<strong>动漫</strong>，丰富经历，升华<strong>思想</strong>，陶冶情操</div>
                        <div class="self-item">不懈<strong>练字</strong>，静谧守心，涤荡浮华，坚守<strong>自我</strong></div>
                        <div class="self-item">狂热<strong>科幻</strong>，脚踏实地，仰望<strong>星空</strong>，探索未知</div>
                        <div class="self-item">热爱<strong>编程</strong>，钻研技术，以<strong>梦</strong>为<strong>码</strong>，创造世界
                        </div>
                    </div>
                </div>
            </div>
            <div class="right-column">
                <div class="project-section">
                    <div class="project-header">
                        <h1 class="project-title"><strong>原创项目: 星梦游Xmy</strong></h1>
                    </div>

                    <div class="project-section-title">一、核心技术：</div>
                    <div class="project-item"><strong>HTML、CSS、JavaScript</strong></div>
                    <div class="project-item"><strong>Canvas、Three.js、WebGL</strong></div>
                    <div class="project-item"><strong>Dynamic Wallpaper Creation</strong></div>



                    <div class="project-section-title">二、项目简介：</div>
                    <div class="project-item">源码下载：<a
                        href="https://github.com/Xmy-Free/Xmy-Free.github.io">
                        https://github.com/Xmy-Free/Xmy-Free.github.io</a>
                    </div>
                    <div class="project-item">项目用时：<strong>超1200小时</strong>,&nbsp;完全独立制作</div>
                    <div class="project-item">代码行数：<strong>超70000行</strong>,&nbsp;匠心原创代码</div>
                    <div class="project-item">项目元素：<strong>创新</strong>·科幻宇宙：</div>
                    <div class="project-item"><strong>流浪地球·三体·球状闪电+</strong></div>
                    <div class="project-item"><strong>黑暗森林·银河·降维打击+</strong></div>
                    <div class="project-item"><strong>星际穿越·黑洞·宇宙闪烁+</strong></div>
                    <div class="project-item"><strong>奇思宇宙·烟花·梦幻星海.</strong></div>


   
                    <a href="mind-map-V2.html" class="algorithm-mindmap-link">
                        <div class="project-section-title algorithm-mindmap-title">
                            <div class="algorithm-pulse-ring"></div>
                            <span class="algorithm-text">三、核心算法-思维导图</span>
                            <div class="algorithm-icon">
                                <i class="algorithm-arrow"></i>
                            </div>
                        </div>
                    </a>
                    
                    <div class="algorithm-container">
                        <div class="algorithm-item">
                            <div class="algorithm-title">3D流浪地球+3D旋转星空</div>
                            <ul class="algorithm-list">
                                <li><span><strong>Three.js</strong>高精度球体与多重纹理叠加技术<br>实现地球表面细节与光照</span></li>
                                <li><span><strong>矩阵组装算法</strong><br>通过<strong>向量四元数</strong>构建星空实例矩阵<br>实现海量星体高效渲染</span></li>
                                <li><span>基于<strong>OrbitControls</strong>的自动旋转视角系统<br>支持人机交互与沉浸式体验</span></li>
                            </ul>
                        </div>
                        
                        <div class="algorithm-item">
                            <div class="algorithm-title">粒子聚能喷射</div>
                            <ul class="algorithm-list">
                                <li><span><strong>球坐标系</strong>分布策略与<strong>非线性增长</strong>算法<br>实现锥形喷射分布</span></li>
                                <li><span><strong>三维欧拉旋转</strong>与<strong>矢量变换</strong>技术<br>确保粒子跟随地球旋转</span></li>
                                <li><span><strong>涡流场物理模拟</strong><br>通过动态湍流与循环重用机制<br>实现等离子体视觉效果</span></li>
                            </ul>
                        </div>
                        
                        <div class="algorithm-item">
                            <div class="algorithm-title">三体运动</div>
                            <ul class="algorithm-list">
                                <li><span>基于<strong>牛顿万有引力定律</strong><br>三维空间动力学计算<br>实现真实天体互相引力</span></li>
                                <li><span><strong>质量-速度-碰撞</strong>物理系统<br>呈现三体问题的<strong>混沌特性</strong><br>临时稳定态的形成</span></li>
                                <li><span>动态轨迹记录与光晕效果<br>通过视觉反馈增强物理真实感</span></li>
                            </ul>
                        </div>
                        
                        <div class="algorithm-item">
                            <div class="algorithm-title">奇思宇宙-爆炸坍缩</div>
                            <ul class="algorithm-list">
                                <li><span><strong>参数化曲线</strong>与<strong>极坐标转换</strong>技术<br>构建粒子运动轨迹的数学模型</span></li>
                                <li><span><strong>阿基米德双螺旋</strong>算法<br>r(θ) = a + b·θ与r(θ) = a - b·θ</span></li>
                                <li><span><strong>三相位移正弦波</strong>色彩算法<br>通过相位差120°生成和谐色域<br>实现彩虹渐变效果</span></li>
                            </ul>
                        </div>
                        
                        <div class="algorithm-item">
                            <div class="algorithm-title">银河系</div>
                            <ul class="algorithm-list">
                                <li><span><strong>球坐标转直角坐标</strong>变换<br>实现三维空间星体分布</span></li>
                                <li><span><strong>对数螺旋</strong>算法 r = a * e^(bθ)<br>结合<strong>分形扰动和概率分布</strong>构建银河旋臂</span></li>
                                <li><span><strong>分段高度函数</strong>与<strong>HSL色彩空间</strong>映射<br>打造银河系真实的立体结构<br>实现星体温度分布</span></li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    </div>
    </d>

    <div id="themeNotifier" class="theme-notifier">主题已切换</div>







    <script>
        // === 自定义鼠标三层同步与 trail 逻辑 ===
        let mouseX = window.innerWidth / 2;
        let mouseY = window.innerHeight / 2;

        // 更新所有鼠标元素的位置
        function setCursorElementsCenter(x, y) {
            // custom-cursor
            const cursor = document.getElementById('custom-cursor');
            if (cursor) {
                // 精确定位cursor，确保cursor-core与真实鼠标位置完全重合
                cursor.style.left = `${x}px`;
                cursor.style.top = `${y}px`;

                // 确保transform不影响精确定位
                cursor.style.transform = 'translate(-50%, -50%) translateZ(0)';

                // 确保cursor-core居中
                const core = cursor.querySelector('.cursor-core');
                if (core) {
                    core.style.left = '50%';
                    core.style.top = '50%';
                    core.style.transform = 'translate(-50%, -50%) translateZ(0)';
                }
            }

            // 所有 trail
            document.querySelectorAll('.cursor-trail').forEach(trail => {
                trail.style.left = `${x}px`;
                trail.style.top = `${y}px`;
                trail.style.transform = 'translate(-50%, -50%) translateZ(0)';
            });
        }

        function syncCursorCenters() {
            setCursorElementsCenter(mouseX, mouseY);
            requestAnimationFrame(syncCursorCenters);
        }

        document.addEventListener('mousemove', (e) => {
            // 使用精确的鼠标坐标，不考虑滚动偏移，因为使用fixed定位
            mouseX = e.clientX;
            mouseY = e.clientY;

            // 直接更新鼠标位置
            setCursorElementsCenter(mouseX, mouseY);

            const cursorTrails = document.getElementById('cursor-trails');
            if (cursorTrails) {
                const trail = document.createElement('div');
                trail.className = 'cursor-trail';
                trail.style.position = 'fixed'; // 使用fixed定位
                trail.style.left = `${mouseX}px`;
                trail.style.top = `${mouseY}px`;
                trail.style.transform = 'translate(-50%, -50%) translateZ(0)';
                cursorTrails.appendChild(trail);
                setTimeout(() => {
                    trail.style.opacity = '0';
                    setTimeout(() => {
                        if (trail.parentNode) trail.parentNode.removeChild(trail);
                    }, 300);
                }, 100);
            }
        });

        document.addEventListener('mousedown', (e) => {
            if (e.button === 0) {
                mouseX = e.clientX;
                mouseY = e.clientY;
                setCursorElementsCenter(mouseX, mouseY);

                const cursor = document.getElementById('custom-cursor');
                if (cursor) {
                    cursor.style.transform = 'translate(-50%, -50%) scale(0.8) translateZ(0)';
                }
            }
        });

        document.addEventListener('mouseup', (e) => {
            if (e.button === 0) {
                const cursor = document.getElementById('custom-cursor');
                if (cursor) {
                    cursor.style.transform = 'translate(-50%, -50%) scale(1) translateZ(0)';
                }
            }
        });

        function initCustomCursor() {
            const cursor = document.getElementById('custom-cursor');
            if (cursor) {
                // 初始化时确保cursor-core和cursor-ring在DOM中存在
                if (!cursor.querySelector('.cursor-core')) {
                    const core = document.createElement('div');
                    core.className = 'cursor-core';
                    cursor.appendChild(core);
                }

                if (!cursor.querySelector('.cursor-ring')) {
                    const ring = document.createElement('div');
                    ring.className = 'cursor-ring';
                    cursor.appendChild(ring);
                }
            }

            document.querySelectorAll('button, a, input, select').forEach(el => {
                el.addEventListener('mouseenter', () => {
                    const cursor = document.getElementById('custom-cursor');
                    if (cursor) {
                        cursor.style.transform = 'translate(-50%, -50%) scale(1.5) translateZ(0)';
                        const core = cursor.querySelector('.cursor-core');
                        if (core) core.style.backgroundColor = '#ff00aa';
                    }
                });

                el.addEventListener('mouseleave', () => {
                    const cursor = document.getElementById('custom-cursor');
                    if (cursor) {
                        cursor.style.transform = 'translate(-50%, -50%) scale(1) translateZ(0)';
                        const core = cursor.querySelector('.cursor-core');
                        if (core) core.style.backgroundColor = '#00f7ff';
                    }
                });
            });
        }

        document.addEventListener('DOMContentLoaded', function () {
            // 确保光标元素在页面加载时创建
            const customCursor = document.getElementById('custom-cursor');
            if (!customCursor) {
                const cursorEl = document.createElement('div');
                cursorEl.id = 'custom-cursor';
                cursorEl.className = 'custom-cursor';
                cursorEl.style.position = 'fixed'; // 使用fixed定位
                cursorEl.style.transform = 'translate(-50%, -50%) translateZ(0)';

                const core = document.createElement('div');
                core.className = 'cursor-core';
                core.style.transform = 'translate(-50%, -50%) translateZ(0)';

                const ring = document.createElement('div');
                ring.className = 'cursor-ring';
                ring.style.transform = 'translate(-50%, -50%) rotate(0deg) translateZ(0)';

                cursorEl.appendChild(core);
                cursorEl.appendChild(ring);
                document.body.appendChild(cursorEl);
            }

            // 确保cursor-trails容器存在
            if (!document.getElementById('cursor-trails')) {
                const trailsContainer = document.createElement('div');
                trailsContainer.id = 'cursor-trails';
                trailsContainer.style.position = 'fixed'; // 使用fixed定位
                trailsContainer.style.zIndex = '2147483646';
                document.body.appendChild(trailsContainer);
            }

            requestAnimationFrame(syncCursorCenters);
            initCustomCursor();
        });
    </script>

    <script>

        document.addEventListener('DOMContentLoaded', function () {
            const themeToggle = document.getElementById('themeToggle');
            const body = document.body;
            const themeNotifier = document.getElementById('themeNotifier');
            let currentTheme = 2;


            setTimeout(() => {
                body.classList.add('galaxy-theme');
                createStars();
                currentTheme = 2;
                themeNotifier.textContent = "已自动加载星空主题";
                themeNotifier.innerHTML = `已自动加载<span style="color:#a0d0ff;text-shadow:0 0 15px rgba(140, 220, 255, 0.9);">星空主题</span>✨`;
                themeNotifier.classList.add('show-notifier');

                // 确保自定义鼠标光标正常工作
                const cursor = document.getElementById('custom-cursor');
                if (cursor) {
                    cursor.style.position = 'fixed';
                    cursor.style.transform = 'translate(-50%, -50%) translateZ(0)';

                    const core = cursor.querySelector('.cursor-core');
                    if (core) {
                        core.style.transform = 'translate(-50%, -50%) translateZ(0)';
                    }

                    const ring = cursor.querySelector('.cursor-ring');
                    if (ring) {
                        ring.style.transform = 'translate(-50%, -50%) translateZ(0)';
                    }
                }

                setTimeout(() => {
                    themeNotifier.classList.remove('show-notifier');
                }, 2500);
            }, 500);

            document.addEventListener('mousemove', function (e) {
                if (body.classList.contains('galaxy-theme')) {

                    const x = (e.clientX / window.innerWidth) * 100;
                    const y = (e.clientY / window.innerHeight) * 100;


                    document.documentElement.style.setProperty('--x', `${x / 5}%`);
                    document.documentElement.style.setProperty('--y', `${y / 5}%`);


                    const resumeContainer = document.querySelector('.resume-container');
                    if (resumeContainer) {
                        const xTilt = ((e.clientX / window.innerWidth) - 0.5) * 5;
                        const yTilt = ((e.clientY / window.innerHeight) - 0.5) * 3;
                        resumeContainer.style.transform = `perspective(1500px) rotateY(${xTilt}deg) rotateX(${-yTilt}deg)`;
                    }


                    const sections = document.querySelectorAll('.section, .project-section');
                    sections.forEach(section => {
                        // 获取元素相对于视口的位置
                        const rect = section.getBoundingClientRect();

                        // 计算鼠标相对于元素的位置（百分比）
                        const mouseX = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100));
                        const mouseY = Math.max(0, Math.min(100, ((e.clientY - rect.top) / rect.height) * 100));

                        // 只在鼠标在元素内部时设置属性
                        if (e.clientX >= rect.left && e.clientX <= rect.right &&
                            e.clientY >= rect.top && e.clientY <= rect.bottom) {
                            section.style.setProperty('--mouse-x', `${mouseX}%`);
                            section.style.setProperty('--mouse-y', `${mouseY}%`);
                        }
                    });


                    createCometParticles(e.clientX, e.clientY);
                } else if (body.classList.contains('rainbow-theme')) {

                    createRainbowParticles(e.clientX, e.clientY);

                    const sections = document.querySelectorAll('.section, .project-section');
                    sections.forEach(section => {
                        // 获取元素相对于视口的位置
                        const rect = section.getBoundingClientRect();

                        // 计算鼠标相对于元素的位置（百分比）
                        const mouseX = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100));
                        const mouseY = Math.max(0, Math.min(100, ((e.clientY - rect.top) / rect.height) * 100));

                        // 只在鼠标在元素内部时设置属性
                        if (e.clientX >= rect.left && e.clientX <= rect.right &&
                            e.clientY >= rect.top && e.clientY <= rect.bottom) {
                            section.style.setProperty('--mouse-x', `${mouseX}%`);
                            section.style.setProperty('--mouse-y', `${mouseY}%`);
                        }
                    });
                }
            });


            function createRainbowParticles(x, y) {
                if (document.querySelectorAll('.rainbow-particle').length > 50) return;


                const particleCount = 2 + Math.floor(Math.random() * 2);

                for (let i = 0; i < particleCount; i++) {
                    if (Math.random() > 0.3) {
                        const particle = document.createElement('div');
                        particle.className = 'rainbow-particle';
                        document.body.appendChild(particle);


                        const size = 1.5 + Math.random() * 4.5;
                        particle.style.width = size + 'px';
                        particle.style.height = size + 'px';


                        const offsetX = (Math.random() - 0.5) * 30;
                        const offsetY = (Math.random() - 0.5) * 30;
                        particle.style.left = (x + offsetX) + 'px';
                        particle.style.top = (y + offsetY) + 'px';

                        const opacity = 0.4 + Math.random() * 0.5;
                        particle.style.setProperty('--opacity', opacity);


                        const distance = 40 + Math.random() * 100;
                        particle.style.setProperty('--distance', distance);


                        const rotation = Math.random() * 360 + 'deg';
                        particle.style.setProperty('--rotation', rotation);


                        const duration = 1 + Math.random() * 3 + 's';
                        particle.style.setProperty('--float-duration', duration);


                        setTimeout(() => {
                            if (particle.parentNode) {
                                particle.parentNode.removeChild(particle);
                            }
                        }, 4000);
                    }
                }
            }


            let cometParticles = [];
            function createCometParticles(x, y) {

                if (document.querySelectorAll('.comet-particle').length > 20) return;

                if (Math.random() > 0.6) {
                    const particle = document.createElement('div');
                    particle.className = 'comet-particle';
                    particle.style.left = x + 'px';
                    particle.style.top = y + 'px';

                    const size = 1 + Math.random() * 3;
                    particle.style.width = size + 'px';
                    particle.style.height = size + 'px';


                    const opacity = 0.3 + Math.random() * 0.7;
                    particle.style.opacity = opacity;

                    document.body.appendChild(particle);


                    setTimeout(() => {
                        if (particle.parentNode) {
                            particle.parentNode.removeChild(particle);
                        }
                    }, 1000);
                }
            }


            function createStars() {
                if (document.querySelector('.star-field')) {
                    return;
                }

                const starField = document.createElement('div');
                starField.className = 'star-field';
                document.body.appendChild(starField);


                for (let i = 0; i < 400; i++) {
                    const star = document.createElement('div');
                    star.className = 'star';


                    const random = Math.random();
                    const sizeClass = random < 0.4 ? 'size-1' :
                        (random < 0.7 ? 'size-2' :
                            (random < 0.85 ? 'size-3' :
                                (random < 0.95 ? 'size-4' : 'size-5')));
                    star.classList.add(sizeClass);


                    const left = Math.random() * 100;
                    const top = Math.random() * 100;
                    star.style.left = left + 'vw';
                    star.style.top = top + 'vh';


                    const duration = 1 + Math.random() * 5;
                    star.style.animationDuration = duration + 's';


                    const delay = Math.random() * 5;
                    star.style.animationDelay = delay + 's';

                    starField.appendChild(star);
                }


                for (let i = 0; i < 12; i++) {
                    const shootingStar = document.createElement('div');
                    shootingStar.className = 'shooting-star';

                    const size = 100 + Math.random() * 200;
                    shootingStar.style.setProperty('--size', `${size}px`);


                    const left = Math.random() * 100;
                    const top = Math.random() * 60;
                    shootingStar.style.left = left + 'vw';
                    shootingStar.style.top = top + 'vh';


                    const angle = Math.random() * 60 - 30;
                    shootingStar.style.setProperty('--angle', `${angle}deg`);


                    const delay = Math.random() * 20;
                    shootingStar.style.setProperty('--delay', `${delay}s`);

                    starField.appendChild(shootingStar);
                }

                const cosmicDust = document.createElement('div');
                cosmicDust.className = 'cosmic-dust';
                document.body.appendChild(cosmicDust);


                for (let i = 0; i < 100; i++) {
                    const dustParticle = document.createElement('div');
                    dustParticle.className = 'dust-particle';


                    const left = Math.random() * 100;
                    const top = Math.random() * 100;
                    dustParticle.style.left = left + 'vw';
                    dustParticle.style.top = top + 'vh';


                    const opacity = 0.3 + Math.random() * 0.7;
                    dustParticle.style.setProperty('--opacity', opacity);


                    const translateX = (Math.random() * 60 - 30) + 'px';
                    const translateY = (Math.random() * 60 - 30) + 'px';
                    dustParticle.style.setProperty('--translate-x', translateX);
                    dustParticle.style.setProperty('--translate-y', translateY);

                    const duration = 5 + Math.random() * 15 + 's';
                    dustParticle.style.setProperty('--float-duration', duration);

                    cosmicDust.appendChild(dustParticle);
                }


                const orbitalSystem = document.createElement('div');
                orbitalSystem.className = 'orbital-system';
                document.body.appendChild(orbitalSystem);


                const orbitalRing = document.createElement('div');
                orbitalRing.className = 'orbital-ring';
                orbitalSystem.appendChild(orbitalRing);


                const planet = document.createElement('div');
                planet.className = 'orbital-planet';
                orbitalSystem.appendChild(planet);


                const moon = document.createElement('div');
                moon.className = 'orbital-moon';
                orbitalRing.appendChild(moon);


                const orbitalSystem2 = document.createElement('div');
                orbitalSystem2.className = 'orbital-system';
                orbitalSystem2.style.top = '30%';
                orbitalSystem2.style.left = '15%';
                orbitalSystem2.style.width = '120px';
                orbitalSystem2.style.height = '120px';
                document.body.appendChild(orbitalSystem2);


                const orbitalRing2 = document.createElement('div');
                orbitalRing2.className = 'orbital-ring';
                orbitalRing2.style.animationDuration = '80s';
                orbitalSystem2.appendChild(orbitalRing2);


                const planet2 = document.createElement('div');
                planet2.className = 'orbital-planet';
                planet2.style.width = '20px';
                planet2.style.height = '20px';
                planet2.style.top = '50px';
                planet2.style.left = '50px';
                planet2.style.background = 'radial-gradient(circle at 35% 35%, rgba(140, 220, 255, 1), rgba(70, 140, 210, 0.8), rgba(30, 60, 140, 0.8))';
                orbitalSystem2.appendChild(planet2);

                const moon2 = document.createElement('div');
                moon2.className = 'orbital-moon';
                moon2.style.animationDuration = '6s';
                orbitalRing2.appendChild(moon2);


                const star3dContainer = document.createElement('div');
                star3dContainer.className = 'star-3d-container';
                document.body.appendChild(star3dContainer);


                for (let i = 0; i < 150; i++) {
                    const star3d = document.createElement('div');
                    star3d.className = 'star-3d';

                    const x = Math.random() * 100;
                    const y = Math.random() * 100;
                    star3d.style.left = `${x}vw`;
                    star3d.style.top = `${y}vh`;


                    const z = Math.random() * 500;
                    star3d.style.setProperty('--z', `${z}px`);


                    const endX = (Math.random() - 0.5) * 200;
                    const endY = (Math.random() - 0.5) * 200;
                    star3d.style.setProperty('--x', `${endX}px`);
                    star3d.style.setProperty('--y', `${endY}px`);

                    const opacity = 0.5 + Math.random() * 0.5;
                    star3d.style.setProperty('--opacity', opacity);


                    star3d.style.animationDuration = `${15 + Math.random() * 15}s`;
                    star3d.style.animationDelay = `${Math.random() * -15}s`;

                    star3dContainer.appendChild(star3d);
                }


                const dynamicNebula = document.createElement('div');
                dynamicNebula.className = 'dynamic-nebula';
                document.body.appendChild(dynamicNebula);


                for (let i = 0; i < 5; i++) {
                    const nebulaGlow = document.createElement('div');
                    nebulaGlow.className = 'nebula-glow';


                    const size = 200 + Math.random() * 400;
                    nebulaGlow.style.width = `${size}px`;
                    nebulaGlow.style.height = `${size}px`;


                    const left = Math.random() * 100;
                    const top = Math.random() * 100;
                    nebulaGlow.style.left = `${left}vw`;
                    nebulaGlow.style.top = `${top}vh`;


                    const colors = [
                        [100, 180, 255],
                        [140, 100, 255],
                        [255, 120, 220],
                        [70, 220, 255],
                        [120, 220, 180],
                        [255, 180, 120],
                        [180, 120, 255],
                        [220, 120, 255],
                        [120, 255, 180],
                        [120, 255, 120],
                        [120, 180, 255],
                        [120, 120, 255],
                        [255, 120, 255],
                        [120, 255, 255],
                        [255, 255, 120],
                        [255, 255, 255],
                        [120, 120, 120],
                        [255, 120, 120],
                        [120, 255, 120],
                        [120, 180, 255],
                        [120, 120, 255],
                        [255, 120, 255],
                        [120, 255, 255],
                        [255, 255, 120],

                    ];

                    const colorIndex1 = Math.floor(Math.random() * colors.length);
                    let colorIndex2 = (colorIndex1 + 1 + Math.floor(Math.random() * (colors.length - 1))) % colors.length;
                    let colorIndex3 = (colorIndex2 + 1 + Math.floor(Math.random() * (colors.length - 1))) % colors.length;

                    nebulaGlow.style.setProperty('--color1', colors[colorIndex1].join(','));
                    nebulaGlow.style.setProperty('--color2', colors[colorIndex2].join(','));
                    nebulaGlow.style.setProperty('--color3', colors[colorIndex3].join(','));


                    const opacity = 0.3 + Math.random() * 0.4;
                    nebulaGlow.style.setProperty('--opacity', opacity);


                    const x = (Math.random() * 100 - 50) + 'px';
                    const y = (Math.random() * 100 - 50) + 'px';
                    nebulaGlow.style.setProperty('--x', x);

                    const scale = 0.8 + Math.random() * 0.5;
                    nebulaGlow.style.setProperty('--scale', scale);


                    const duration = 15 + Math.random() * 25 + 's';
                    nebulaGlow.style.setProperty('--duration', duration);

                    dynamicNebula.appendChild(nebulaGlow);
                }


                const aurora = document.createElement('div');
                aurora.className = 'aurora-container';
                document.body.appendChild(aurora);

                for (let i = 0; i < 3; i++) {
                    const auroraLight = document.createElement('div');
                    auroraLight.className = 'aurora-light';


                    if (i === 0) {
                        auroraLight.style.top = '-20%';
                        auroraLight.style.left = '-10%';
                        auroraLight.style.right = '40%';
                    } else if (i === 1) {
                        auroraLight.style.top = '-30%';
                        auroraLight.style.left = '30%';
                        auroraLight.style.right = '-10%';
                    } else {
                        auroraLight.style.top = '60%';
                        auroraLight.style.left = '-20%';
                        auroraLight.style.right = '20%';
                    }

                    aurora.appendChild(auroraLight);
                }


                const allSections = document.querySelectorAll('.section, .project-section');
                allSections.forEach(section => {
                    section.addEventListener('mousemove', function (e) {
                        const rect = this.getBoundingClientRect();
                        const x = ((e.clientX - rect.left) / rect.width) * 100;
                        const y = ((e.clientY - rect.top) / rect.height) * 100;

                        this.style.setProperty('--mouse-x', `${x}%`);
                        this.style.setProperty('--mouse-y', `${y}%`);
                    });
                });
            }


            function createRainbowEffects() {

                const rainbowParticlesContainer = document.createElement('div');
                rainbowParticlesContainer.className = 'rainbow-particles';
                document.body.appendChild(rainbowParticlesContainer);


                for (let i = 0; i < 60; i++) {
                    const particle = document.createElement('div');
                    particle.className = 'rainbow-particle';


                    const left = Math.random() * 100;
                    const top = Math.random() * 100;
                    particle.style.left = left + 'vw';
                    particle.style.top = top + 'vh';


                    const size = 1.5 + Math.random() * 5.5;
                    particle.style.width = size + 'px';
                    particle.style.height = size + 'px';


                    const opacity = 0.3 + Math.random() * 0.7;
                    particle.style.setProperty('--opacity', opacity);


                    const duration = 4 + Math.random() * 18 + 's';
                    particle.style.setProperty('--float-duration', duration);


                    const distance = 40 + Math.random() * 120;
                    particle.style.setProperty('--distance', distance);


                    const rotation = Math.random() * 360 + 'deg';
                    particle.style.setProperty('--rotation', rotation);

                    rainbowParticlesContainer.appendChild(particle);
                }


                const styleSheet = document.createElement('style');
                styleSheet.innerHTML = `
                    @keyframes beam-sweep {
                        0% { transform: translateX(-100%) rotate(var(--angle, 30deg)); opacity: 0; }
                        5% { opacity: 1; }
                        50% { opacity: 0.8; }
                        95% { opacity: 1; }
                        100% { transform: translateX(100%) rotate(var(--angle, 30deg)); opacity: 0; }
                    }
                `;
                document.head.appendChild(styleSheet);

                const rainbowBeam = document.createElement('div');
                rainbowBeam.className = 'rainbow-beam';
                rainbowBeam.style.position = 'fixed';
                rainbowBeam.style.width = '100%';
                rainbowBeam.style.height = '100%';
                rainbowBeam.style.top = '0';
                rainbowBeam.style.left = '0';
                rainbowBeam.style.pointerEvents = 'none';
                rainbowBeam.style.zIndex = '-1';
                document.body.appendChild(rainbowBeam);


                for (let i = 0; i < 3; i++) {
                    const beam = document.createElement('div');
                    beam.style.position = 'absolute';
                    beam.style.width = '200%';
                    beam.style.height = '5px';
                    beam.style.background = `linear-gradient(90deg, 
                        rgba(255, 0, 0, 0.05), 
                        rgba(255, 165, 0, 0.05), 
                        rgba(255, 255, 0, 0.05), 
                        rgba(0, 255, 0, 0.05), 
                        rgba(0, 0, 255, 0.05), 
                        rgba(75, 0, 130, 0.05), 
                        rgba(238, 130, 238, 0.05))`;
                    beam.style.borderRadius = '3px';
                    beam.style.filter = 'blur(3px)';


                    const top = Math.random() * 100;
                    const angle = -30 + Math.random() * 60;
                    beam.style.top = `${top}%`;
                    beam.style.left = '-50%';
                    beam.style.setProperty('--angle', `${angle}deg`);
                    beam.style.transform = `rotate(${angle}deg)`;

                    beam.style.animation = `beam-sweep ${15 + Math.random() * 10}s linear infinite`;
                    beam.style.animationDelay = `${Math.random() * 5}s`;

                    rainbowBeam.appendChild(beam);
                }
            }

            function removeRainbowEffects() {
                const rainbowParticles = document.querySelector('.rainbow-particles');
                if (rainbowParticles) {
                    rainbowParticles.remove();
                }


                const particles = document.querySelectorAll('.rainbow-particle');
                particles.forEach(particle => particle.remove());
            }

            function removeStars() {
                const starField = document.querySelector('.star-field');
                if (starField) {
                    starField.remove();
                }

                const cosmicDust = document.querySelector('.cosmic-dust');
                if (cosmicDust) {
                    cosmicDust.remove();
                }

                const orbitalSystem = document.querySelectorAll('.orbital-system');
                orbitalSystem.forEach(system => system.remove());


                const star3dContainer = document.querySelector('.star-3d-container');
                if (star3dContainer) {
                    star3dContainer.remove();
                }


                const dynamicNebula = document.querySelector('.dynamic-nebula');
                if (dynamicNebula) {
                    dynamicNebula.remove();
                }

                const aurora = document.querySelector('.aurora-container');
                if (aurora) {
                    aurora.remove();
                }


                const cometParticles = document.querySelectorAll('.comet-particle');
                cometParticles.forEach(particle => particle.remove());
            }

            themeToggle.addEventListener('click', function () {
                body.classList.remove('theme-transition');
                setTimeout(() => {
                    body.classList.add('theme-transition');
                }, 10);

                currentTheme = (currentTheme + 1) % 3;

                // 移除所有主题
                body.classList.remove('dark-theme', 'rainbow-theme', 'galaxy-theme');

                // 应用新主题
                if (currentTheme === 0) {
                    body.classList.add('dark-theme');
                    themeNotifier.innerHTML = `已切换到<span style="color:#a0c0ff;">暗黑主题</span>🌙`;
                    if (document.querySelector('.star-field')) {
                        document.querySelector('.star-field').remove();
                    }
                    if (document.querySelector('.cosmic-dust')) {
                        document.querySelector('.cosmic-dust').remove();
                    }
                    if (document.querySelector('.rainbow-particles')) {
                        document.querySelector('.rainbow-particles').remove();
                    }
                    document.body.classList.add('theme-changed');
                    setTimeout(() => {
                        document.body.classList.remove('theme-changed');
                    }, 500);
                } else if (currentTheme === 1) {
                    body.classList.add('rainbow-theme');
                    themeNotifier.innerHTML = `已切换到<span style="background-image: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);-webkit-background-clip: text;color: transparent;">彩虹主题</span>🌈`;
                    createRainbowEffects();
                    if (document.querySelector('.star-field')) {
                        document.querySelector('.star-field').remove();
                    }
                    if (document.querySelector('.cosmic-dust')) {
                        document.querySelector('.cosmic-dust').remove();
                    }
                    document.body.classList.add('theme-changed');
                    setTimeout(() => {
                        document.body.classList.remove('theme-changed');
                    }, 500);
                } else {
                    body.classList.add('galaxy-theme');
                    themeNotifier.innerHTML = `已切换到<span style="color:#a0d0ff;text-shadow:0 0 15px rgba(140, 220, 255, 0.9);">星空主题</span>✨`;
                    createStars();
                    if (document.querySelector('.rainbow-particles')) {
                        document.querySelector('.rainbow-particles').remove();
                    }
                    document.body.classList.add('theme-changed');
                    setTimeout(() => {
                        document.body.classList.remove('theme-changed');
                    }, 500);
                }

                // 重新初始化自定义鼠标光标，确保主题切换后光标正常工作
                const cursor = document.getElementById('custom-cursor');
                if (cursor) {
                    cursor.style.position = 'fixed';
                    cursor.style.transform = 'translate(-50%, -50%) translateZ(0)';

                    // 确保cursor-core和ring使用正确的transform
                    const core = cursor.querySelector('.cursor-core');
                    if (core) {
                        core.style.transform = 'translate(-50%, -50%) translateZ(0)';
                    }

                    const ring = cursor.querySelector('.cursor-ring');
                    if (ring) {
                        ring.style.transform = 'translate(-50%, -50%) translateZ(0)';
                    }
                }

                themeNotifier.classList.add('show-notifier');
                setTimeout(() => {
                    themeNotifier.classList.remove('show-notifier');
                }, 2500);
            });


            const profilePic = document.getElementById('themeToggle');
            profilePic.setAttribute('title', '点击切换主题风格');

            const sections = document.querySelectorAll('.section, .project-section');
            sections.forEach((section, index) => {
                section.style.opacity = '0';
                section.style.transform = 'translateY(20px)';

                setTimeout(() => {
                    section.style.transition = 'all 0.7s ease-out';
                    section.style.opacity = '1';
                    section.style.transform = 'translateY(0)';
                }, 300 + (index * 120));
            });

            const urlParams = new URLSearchParams(window.location.search);
            const themeParam = urlParams.get('theme');
            if (themeParam === 'galaxy') {
                currentTheme = 1;
                themeToggle.click();
            }
        });
    </script>


    <script>
        document.addEventListener('click', function () {
            var elem = document.documentElement;
            if (elem.requestFullscreen) {
                elem.requestFullscreen();
            } else if (elem.mozRequestFullScreen) { /* Firefox */
                elem.mozRequestFullScreen();
            } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
                elem.webkitRequestFullscreen();
            } else if (elem.msRequestFullscreen) { /* IE/Edge */
                elem.msRequestFullscreen();
            }
        }, { once: true }); // 使用 { once: true } 确保只在第一次点击时触发
    </script>

    <script>
        // 中键长按跳转
        let middleMouseDownTimer = null;
        window.addEventListener('mousedown', function (event) {
            if (event.button === 1) { // 1 表示鼠标中键
                middleMouseDownTimer = setTimeout(function () {
                    window.location.href = './wandering-earth.html';
                }, 1000); // 1秒
            }
        });

        window.addEventListener('mouseup', function (event) {
            if (event.button === 1) { // 1 表示鼠标中键
                if (middleMouseDownTimer) {
                    clearTimeout(middleMouseDownTimer);
                    middleMouseDownTimer = null;
                }
            }
        });

        // 防止中键点击时出现上下文菜单
        window.addEventListener('contextmenu', function (event) {
            if (event.button === 1) {
                event.preventDefault();
            }
        });

    </script>

    <script>
        // 滚动事件监听，确保滚动时鼠标光标位置正确
        window.addEventListener('scroll', function () {
            // 滚动时重新应用最后的鼠标位置
            setCursorElementsCenter(mouseX, mouseY);
        }, { passive: true }); // 使用passive选项提升性能

        document.addEventListener('DOMContentLoaded', function () {
            // 确保光标元素在页面加载时创建
            const customCursor = document.getElementById('custom-cursor');
            if (!customCursor) {
                const cursorEl = document.createElement('div');
                cursorEl.id = 'custom-cursor';
                cursorEl.className = 'custom-cursor';
                cursorEl.style.position = 'fixed'; // 使用fixed定位
                cursorEl.style.transform = 'translate(-50%, -50%) translateZ(0)';

                const core = document.createElement('div');
                core.className = 'cursor-core';
                core.style.transform = 'translate(-50%, -50%) translateZ(0)';

                const ring = document.createElement('div');
                ring.className = 'cursor-ring';
                ring.style.transform = 'translate(-50%, -50%) rotate(0deg) translateZ(0)';

                cursorEl.appendChild(core);
                cursorEl.appendChild(ring);
                document.body.appendChild(cursorEl);
            }
        });
    </script>

</body>

</html>